在项目中使用了dataTables 插件,学习整理一下。

  dataTables 的官方中文网站 http://www.datatables.club

  引入文件:

  所有的都要引入 jq文件

  1. dataTables 的样式

  <link rel="stylesheet" href="jquery.dataTables.css">

  <script src="jquery.dataTable.js">

  2. bootstrap 风格的dataTables

  <link rel="stylesheet" href="bootstrap.css">

  <link rel="stylesheet" href="dataTables.bootstrap.css">

  <script src="bootstrap.js"> 

  <script src="jquery.dataTable.js">

  <script src="dataTable.bootstrap.js">

  HTML 代码

 1 <table id="example" width="100%" class="table table-striped table-bordered">
2 <thead>
3 <tr>
4 <th>编码</th>
5 <th>职位</th>
6 <th>姓名</th>
7 <th>状态</th>
8 <th>项目</th>
9 <th>机构</th>
10 <th>操作</th>
11 </tr>
12 </thead>
13 </table>

 JS 代码基本配置

  1 var lang = {
2 "sProcessing": "处理中...",
3 "sLengthMenu": "每页 _MENU_ 项",
4 "sZeroRecords": "没有匹配结果",
5 "sInfo": "当前显示第 _START_ 至 _END_ 项,共 _TOTAL_ 项。",
6 "sInfoEmpty": "当前显示第 0 至 0 项,共 0 项",
7 "sInfoFiltered": "(由 _MAX_ 项结果过滤)",
8 "sInfoPostFix": "",
9 // "sSearch": "本地搜索:",
10 "sUrl": "",
11 "sEmptyTable": "暂无数据",
12 "sLoadingRecords": "载入中...",
13 "sInfoThousands": ",",
14 "oPaginate": {
15 "sFirst": "首页",
16 "sPrevious": "上页",
17 "sNext": "下页",
18 "sLast": "末页",
19 "sJump": "跳转"
20 },
21 "oAria": {
22 "sSortAscending": ": 以升序排列此列",
23 "sSortDescending": ": 以降序排列此列"
24 }
25 };
26
27 $('#example').DataTable({
28 "processing" : true, //DataTables载入数据时,是否显示进度条
29 "serverSide": true, // 开启服务端模式
30 "language": lang, //提示信息
31 "autoWidth": false, //自适应宽度,
32 "sScrollY" : 450, //DataTables的高
33 "sScrollX" : 820, //DataTables的宽
34 "columnDefs": [
35 {"targets": 0, "width": "10%"}, // 设置第一列的宽度
36 {"targets": 1, "width": "10%"},
37 {"targets": 2, "width": "10%"},
38 {"targets": 3, "width": "10%"},
39 {"targets": 4, "width": "20%"},
40 {"targets": 5, "width": "20%"},
41 {"targets": 6, "width": "20%"}
42 ],
43 "lengthMenu": [10, 20, 30], // 显示每页显示的条数
44 "stripeClasses": ["odd", "even"], // 为奇偶行添加样式
45 "searching": true, // 是否允许开启本地检索功能
46 "bFilter": false, // 去掉 搜索框
47 "paging": true, // 是否开启本地分页
48 "lengthChange": true, //是否允许产品改变表格每页显示的记录数
49 "info": true, // 控制是否显示表格左下角的信息
50 "bSort": false, // 禁止排序
51 "deferRender": true, // 延迟渲染
52 "pageLength": 10, // 每页显示的条数
53 //跟数组下标一样,第一列从0开始,这里表格初始化时,
54 "order": [2, 'asc'], //asc升序 desc降序 // 下标为2,第三列 生序排列
55 "aoColumnDefs": [{
56 "orderable": false,// 指定列不参与排序
57 "aTargets": [1,3,4,5,6] // 指定 下标为[1,3,4,5,6]的不排序
58 }],
59 "initComplete": function () { // 给每列添加下拉搜索
60 var api = this.api();
61 api.columns().indexes().flatten().each(function (i) {
62 if (i != 0 && i != 2 && i != 6) { // 第1,3,7不添加,其余的添加
63 var column = api.column(i);
64 var select = $('<select><option value=""></option></select>')
65 .appendTo($(column.header())) // 显示在table中最上面在thead里面
66 .on('change', function () {
67 var val = $.fn.dataTable.util.escapeRegex(
68 $(this).val()
69 );
70 column
71 .search(val ? val : '', true, false)
72 .draw();
73 });
74
75 column.data().unique().sort().each(function (d, j) {
76 var text = $(d).html(); // 获取 span 里面的 text
77 var val = $(d).attr("value"); // 获取span 里面的自定义属性 value
78 if(text != null && text.trim() != "" && val != null && text.trim() != ""){
79 select.append('<option value="' + val + '">' + text + '</option>')
80 }
81
82 });
83 }
84
85 });
86 },
87 "ajax": { // ajax 请求数据
88 "url": "请求路径",
89 "type": "get"
90 },
91 "columns":[
92 {data: name}(后台返回的字段名), // 有几列就解析几次
93 data: tell(后台返回的字段名),
94 ...
95 // 还可以写
96 //{
97 // "data": function (e) {
98 // return e.name;
99 // }
100 // },
101
102 ]
103
104
105 });

给每一列添加下拉搜索的方法 (2)官方

  首先在html中添加

 1 <tfoot>
2 <tr>
3 <th></th>
4 <th></th>
5 <th></th>
6 <th></th>
7 <th></th>
8 <th></th>
9 </tr>
10 </tfoot>

  js代码

 1 initComplete: function () {
2             var api = this.api();
3             api.columns().indexes().flatten().each( function ( i ) {
4                 var column = api.column( i );
5                 var select = $('<select><option value=""></option></select>')
6                     .appendTo( $(column.footer()).empty() ) // 给tfoot里面添加select
7                     .on( 'change', function () {
8                         var val = $.fn.dataTable.util.escapeRegex(
9                             $(this).val()
10                         );
11                         column
12                             .search( val ? '^'+val+'$' : '', true, false )
13                             .draw();
14                     } );
15                 column.data().unique().sort().each( function ( d, j ) {
16                     select.append( '<option value="'+d+'">'+d+'</option>' )
17                 } );
18             } );
19         }

  给每列添加自定义属性

1 // 在 "columns" 下面添加
2 createdRow: function (row, data, index) {
3 // 给每列添加 自定义属性 name
4 $(row).attr('name',data.name);
5 }

  给每列添加点击事件

  $('#example  tbody').on( 'click', 'tr', function () { }) ;

  自定义的分页 ,只给后台传指定的参数

  length   // 页面显示的条数,每页显示多少条、

  start    //  开始的记录序号

  draw    //  当前页面

 1 "ajax": function (data, callback, settings) {
2 //封装请求参数
3 var param = {};
4 param.length = data.length;//页面显示记录条数,在页面显示每页显示多少项的时候
5 param.start = data.start;//开始的记录序号
6 param.draw = data.draw;//当前页码
7
8 //ajax请求数据
9 $.ajax({
10 type: "get",
11 url: "请求路径",
12 cache: false, //禁用缓存
13 data: param,
14 dataType: "json",
15 success: function (result) {
16 //封装返回数据
17 var returnData = {};
18 returnData.draw = result.data.draw;//这里直接自行返回了draw计数器,应该由后台返回
19 returnData.recordsTotal = result.data.recordsTotal;//返回数据全部记录
20 returnData.recordsFiltered = result.data.recordsFiltered;//后台不实现过滤功能,每次查询均视作全部结果
21 returnData.data = result.data.data;//返回的数据列表
22 //调用DataTables提供的callback方法,代表数据已封装完成并传回DataTables进行渲染
23 //此时的数据需确保正确无误,异常判断应在执行此回调前自行处理完毕
24 callback(returnData);
25 }
26 });
27 },

dataTables 插件学习整理的更多相关文章

  1. TweenMax学习整理--特有属性

    TweenMax学习整理--特有属性   构造函数:TweenMax(target:Object, duration:Number, vars:Object) target:Object -- 需要缓 ...

  2. js数组学习整理

    原文地址:js数组学习整理 常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); // ...

  3. [jQuery]jQuery DataTables插件自定义Ajax分页实现

    前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...

  4. HttpClient学习整理

    HttpClient简介HttpClient 功能介绍    1. 读取网页(HTTP/HTTPS)内容    2.使用POST方式提交数据(httpClient3)    3. 处理页面重定向    ...

  5. uexQQ插件学习心得

    uexQQ插件学习心得 uexQQ插件的作用:通过qq可以分享图文,音乐,应用到相应的qq空间.支持手机客户端分享和手机webQQ分享.下面我们就来看一看他的一些方法. 我们先说一下分享的步骤,这个步 ...

  6. emmet插件学习,练习中遇到一些问题

    emmet插件学习:帮助提高敲代码效率的插件 参考文献:Emmet(Zen coding)HTML代码使用技巧七则http://www.wzsky.net/html/Website/htmlcss/1 ...

  7. bootstrap插件学习

    转自http://v3.bootcss.com/javascript/ bootstrap javascript插件学习 模态框 打开模态框 <button type="button& ...

  8. Jquery插件学习

    前端开发也工作了一段时间,Jquery代码页写了很多,但是都是些的很零散的,不是很好用,网上看了很多人写的Jquery 很好用,而且到每个项目中都可以使用, 本人就感觉很好奇他们是怎么做到的呢,于是自 ...

  9. jquery.dataTables插件使用例子详解

    DataTables是一个jQuery的表格插件.这是一个高度灵活的工具,依据的基础逐步增强,这将增加先进的互动控制,支持任何HTML表格 效果图 代码 <!doctype html> & ...

随机推荐

  1. (五)surging 微服务框架使用系列之缓存-reids

    1.服务跟客户端初始化的时候需要添加缓存配置 var host = new ServiceHostBuilder() .RegisterServices(builder => { builder ...

  2. 痞子衡嵌入式:恩智浦i.MXRT系列微控制器量产神器RT-Flash用户指南

    RT Flash English | 中文 1 软件概览 1.1 介绍 RT-Flash是一个专为基于NXP i.MX RT系列芯片的产品量产而设计的工具,其功能与官方MfgTool2工具类似,但是解 ...

  3. webpack-插件机制杂记

    系列文章 Webpack系列-第一篇基础杂记 webpack系列-插件机制杂记 前言 webpack本身并不难,他所完成的各种复杂炫酷的功能都依赖于他的插件机制.或许我们在日常的开发需求中并不需要自己 ...

  4. LeetCode矩阵题型

    以三角形遍历矩阵 ; i < matrix.size(); ++i) { ; j < matrix[i].size(); ++j) swap(matrix[i][j], matrix[j] ...

  5. Java开发笔记(八十一)如何使用系统自带的注解

    之前介绍继承的时候,提到对于子类而言,父类的普通方法可以重写也可以不重写,但是父类的抽象方法是必须重写的,如果不重写,编译器就直接在子类名称那里显示红叉报错.例如,以前演示抽象类用法之时,曾经把Chi ...

  6. 重写Ext中的typeOf函数

    重写Ext中的typeOf函数来解决Ext JS中typeOf对字符串对象.元素节点.文本节点.空白文本节点判断并不准确的问题 重写的typeOf函数使用自己实现的TypeOf函数2中的代码 测试代码 ...

  7. 20190421-那些年使用过的CSS预处理器(CSS Preprocessor)

    写在前面的乱七八糟的前言: emmm,不得不说,早上七点是个好时间,公园里跳广场舞的大妈,街边卖菜刀看报的大爷,又不得不说,广州图书馆是个好地方,该有的安静,该有的人气,听着楼下小孩子的声音,看着周围 ...

  8. 模板引擎artTemplate的使用

    1.引入template文件 <script src = js/template-native.js></script> 2.写模板 <script type=" ...

  9. wordpress的excerpt()函数

    问题:在wordpres中的single页面,本身引用的<?php the_excerpt(); ?>,但是在页面上显示的却是文章的内容 原因:the_excerpt(); 在excerp ...

  10. App隐私条款

    欢迎光临本app,请您仔细阅读以下条款,如果您对本协议的任何条款表示异议,您可以选择不使用本app:进入本app则意味着您将同意遵守本协议下全部规定,并完全服从于app开发者的统一管理. 第一章 总则 ...