讲一讲如何使用DataTable

可能有人说现在第是使用前端三大框架来做项目，利用数据绑定来实现表格的操作极其方便快捷。但是没有接触过这三大框架的人多多少少有用过jq dataTable这个插件。我在进入前端这个方向的时候我直接接触了Angularjs了，利用双向数据绑定来做表格特别的方便快捷，后来换了公司，因为需要维护项目所以才接触这个jq插件。总得来说阅读过插件的API还是觉得挺方便的，毕竟别人都封装好了方法。但是中文网上的实例实在是少了，不够详细，想我等菜鸟只能是google了。如今对这个表格还算是挺熟悉的，所以记录下来，以便各位网友遇到问题是能够作为参考，也有不对之处敬请指出更正。

dataTable

jQuery 的插件 dataTables 是一个优秀的表格插件，提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。dataTables 的网站上也提供了大量的演示和详细的文档进行说明，为了方便学习使用，这里一步一步进行说明。
首先，需要到 dataTables(中文网点这里) 的网站 下载脚本库。

使用方法

直接上代码：

引入css和js文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="datatables/datatables.min.css" rel="stylesheet">
  <link rel="stylesheet" href="bootstrap/datatables.bootstrap.css">
  <title>datatable</title>
</head>
<body>
    <table class="table table-striped table-bordered table-hover table-checkable order-column"
                               id="News_article_table">
                        </table>
  <script src="jquery/jquery.min.js"></script>
  <script src="datatables/datatables.min.js"></script>
  <script src="/bootstrap/datatables.bootstrap.js"></script>
  <script src="/controller/dataTatbalCtrl"></script>
</body>
    
</html>

js文件（dataTatbalCtrl.js）：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
var News_article_table = $('#News_article_table').dataTable({
        ajax: {
            url: 'url',
            type: 'get',
            data: null,
            dataType: 'json',
            scriptCharset: 'utf-8',
            async: false,
            dataSrc: function (result) {
                localStorage.all = JSON.stringify(result.data);
                return result.data;
            }
        },
        "language": {
            "aria": {
                "sortAscending": ": 升序排列",
                "sortDescending": ": 降序排列"
            },
            "emptyTable": "没有数据显示",
            "info": "显示_START_ 到 _END_ 条/ 共_TOTAL_ 条",
            "infoEmpty": "没有搜索到结果",
            "infoFiltered": "",
            "lengthMenu": "<span class='tab-page-show'>显示</span> _MENU_ <span class='tab-page-show'>条</span>",
            "search": "<span class='tab-search'>查询</span>",
            "zeroRecords": "没有匹配到数据",
            "paginate": {
                "previous": "上页",
                "next": "下页",
                "last": "末页",
                "first": "首页"
            }
        },
        bStateSave: true, // 保存状态 - 在页面重新加载的时候恢复状态（页码等内容）
        lengthMenu: [
            [5, 8, 10, 15, -1],
            [5, 8, 10, 15, "全部"] // change per page values here
        ],
        // set the initial value
        pageLength: 10,
        pagingType: "bootstrap_full_number",
        //去掉默认的排序三角形图标
        order: [],
        columns: [
            {
                data: null, 
                title: '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">' +
                '<input type="checkbox" class="group-checkable" data-set="#News_article_table .checkboxes" />' +
                '<span></span>' +
                '</label>',
                width: "5%",
                orderable: false  //配合order:[] 屏蔽排序和三角图标
            },
            {
                data: "null",//服务器返回的 字段名，如果需要进行数据处理可以填写为null,
                title: "基本信息",//表头信息
                width: "25%",//列宽
                render: function (data, type, row, meta) {
                   //逻辑处理
                }
            }
        ],
        columnDefs: [{
            //指定第第一列（check框）
            targets: 0,
            render: function (data, type, row, meta) {
              //逻辑处理
            }
        }, {
            //   指定第最后一列
            targets: 7,
            render: function (data, type, row, meta) {
              //逻辑处理
            }
        }]
    });

配置参数可看api文档，讲的也很详细。
以上的是实现的是前端实现分页操作，服务器会把全部数据给你。一次性查找所需的所有数据（但对于若查找的数据有上万条效率太低）
所以用服务器端动态分页：一次访问几条，多次访问后台数据；

服务器分页配置

如果需要进行服务器分页的需要把serverSide设置为true,在上列的没有写该参数，默认情况时false，所以需要写入该参数；
这里建议阅读http://www.datatables.club/manual/server-side.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
var News_article_table = $('#News_article_table').dataTable({
    "bProcessing":false,//是否显示处理状态(排序的时候，数据很多耗费时间长的话，也会显示这个)
    "sAjaxSource":'news/lists',//接口请求地址
    "serverSide":true,//开启服务器模式
     "fnServerData":function(sSource, aoData, fnCallback){
    	var page = aoData[3].value/aoData[4].value;
    //	console.log(page);
        var	currenPage= page==Infinity?1:parseInt(page)+1;
    	aoData.push({name:'currenPage',value:currenPage});//我个人添加这个当前页
    	$.ajax({
        url: sSource,
        type: 'get',
        data: aoData,
        dataType: 'json',
        scriptCharset: 'utf-8',
        async: false,
        success:function(resp){
        	fnCallback(resp);
        }
       });
    },
    "language": {
        "aria": {
            "sortAscending": ": 升序排列",
            "sortDescending": ": 降序排列"
        },
        "emptyTable": "没有数据显示",
        "info": "显示_START_ 到 _END_ 条/ 共_TOTAL_ 条",
        "infoEmpty": "没有搜索到结果",
        "infoFiltered": "",
        "lengthMenu": "<span class='tab-page-show'>显示</span> _MENU_ <span class='tab-page-show'>条</span>",
        "search": "<span class='tab-search'>查询</span>",
        "zeroRecords": "没有匹配到数据",
        "paginate": {
            "previous": "上页",
            "next": "下页",
            "last": "末页",
            "first": "首页"
        }
    },
    bStateSave: false, // 保存状态 - 在页面重新加载的时候恢复状态（页码等内容）
    lengthMenu: [
        [5, 8, 10, 15, -1],
        [5, 8, 10, 15, "全部"] // change per page values here
    ],
    // set the initial value
    pageLength: 10,
    pagingType: "bootstrap_full_number",
    //去掉默认的排序三角形图标
    order: [],
    columns: [
        {
            data: null, 
            title: '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline">' +
            '<input type="checkbox" class="group-checkable" data-set="#News_article_table .checkboxes" />' +
            '<span></span>' +
            '</label>',
            width: "5%",
            orderable: false  //配合order:[] 屏蔽排序和三角图标
        },
        {
            data: "null",//服务器返回的 字段名，如果需要进行数据处理可以填写为null,
            title: "基本信息",//表头信息
            width: "25%",//列宽
            render: function (data, type, row, meta) {
               //逻辑处理
            }
        }
    ],
    columnDefs: [{
        //指定第第一列（check框）
        targets: 0,
        render: function (data, type, row, meta) {
          //逻辑处理
        }
    }, {
        //   指定第最后一列
        targets: 7,
        render: function (data, type, row, meta) {
          //逻辑处理
        }
    }]
});

开启服务器处理模式，这时我们对表格的每次操作，datatable都会帮我们向服务器发起请求获取数据，默认是用GET方式传递参数，所以我们下面加上了”fnServerData”，这样可以修改参数传递的方式为POST，那么到底给服务端发送的”aoData”是个什么鬼呢，别急，我们直接从Servlet取出来看看就知道了
我们在浏览器打开页面并打印aoData

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
    [{“name”:”sEcho”,”value”:1}, 
{“name”:”iColumns”,”value”:3}, 
{“name”:”sColumns”,”value”:”,,”}, 
{“name”:”iDisplayStart”,”value”:0}, 
{“name”:”iDisplayLength”,”value”:10}, 
{“name”:”mDataProp_0”,”value”:”id”}, 
{“name”:”sSearch_0”,”value”:”“}, 
{“name”:”bRegex_0”,”value”:false}, 
{“name”:”bSearchable_0”,”value”:true}, 
{“name”:”bSortable_0”,”value”:true}, 
{“name”:”mDataProp_1”,”value”:”name”}, 
{“name”:”sSearch_1”,”value”:”“}, 
{“name”:”bRegex_1”,”value”:false}, 
{“name”:”bSearchable_1”,”value”:true}, 
{“name”:”bSortable_1”,”value”:true}, 
{“name”:”mDataProp_2”,”value”:”age”}, 
{“name”:”sSearch_2”,”value”:”“}, 
{“name”:”bRegex_2”,”value”:false}, 
{“name”:”bSearchable_2”,”value”:true}, 
{“name”:”bSortable_2”,”value”:true}, 
{“name”:”sSearch”,”value”:”“}, 
{“name”:”bRegex”,”value”:false}, 
{“name”:”iSortCol_0”,”value”:0}, 
{“name”:”sSortDir_0”,”value”:”asc”}, 
{“name”:”iSortingCols”,”value”:1}]

刚刚开始看到这些数据我真的有点乱，一个分页查询看到有这么多参数
sEcho：客户端发送请求同时发送过来的一个标识，虽然有什么卵用不知道，不过我们服务端返回的数据中必须带有这个标识，哦，官网的文档里说，服务端取出标识最好转一下转成int，防止XXS攻击（懵逼，暂且不管，我们只知道需要这个就行）
iColumns：列数
iDisplayStart：起始索引
iDisplayLength：显示的行数
{“name”:”mDataProp_0”,”value”:”id”},
{“name”:”sSearch_0”,”value”:”“},
{“name”:”bRegex_0”,”value”:false},
{“name”:”bSearchable_0”,”value”:true},
{“name”:”bSortable_0”,”value”:true}
每一列的参数设置，_0即是第一列，这个我们不管，到下面也是提取列名而已
sSearch：全局搜索字段
iSortCol_0：被排序的列
sSortDir_0：排序方式；

服务端必须返回的数据格式如下：

1
2
3
4
5
6
{
    draw:1,//必须 ，Datatables发送的draw是多少那么服务器就返回多少。 这里注意，作者出于安全的考虑，强烈要求把这个转换为整形，即数字后再返回，而不是纯粹的接受然后返回，这是 为了防止跨站脚本（XSS）攻击。也就上面的sEcho字段给了服务端多少，服务端就返回多少
    recordsTotal:25,//即没有过滤的记录数（数据库里总共记录数）
    recordsFiltered:25, // 过滤后的记录数（如果有接收到前台的过滤条件，则返回的是过滤后的记录数）
    data:[]
}

至此服务端分页完成。以上是根据中文网提供的api文档以及网友提供的方法总结出来的，总体是还是很乱，因为中文网api所提供的参数与网友所提供的api参数并不一致，但是在我这里却都可以。也有可能是文件版本的问题。如果有其它疑问可以给我留言。

赏

谢谢你请我吃糖果

支付宝
微信

扫一扫，分享到微信

微信分享二维码

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

Lynn<br><br>毕业于湘潭某个不出名的大学、就职于双菱<br><br>热爱生活、喜欢音乐、旅游还喜欢吃<br><br>目前是前端程序猿一枚