简介

用于显示表格的一款插件

效果

Paste_Image.png

用法

html：

Paste_Image.png

js:

Paste_Image.png

dtTable = $("#personTable").DataTable({
    serverSide: true, //服务端分页
    searching: false, //显示默认搜索框
    ordering: false, //开启排序
    "ajax": {
        "url": $(document).api.settings.api['query user'],
        "data": function(d) {
            $.extend(d, personQuery.data);
        },
        "dataSrc": function(json) {
            for(var i = 0; i < json.data.length; i++) {
                json.data[i] = $.extend({
                    id: 0,
                    name: "",
                    organizeId: 0,
                    orgName: "",
                    login: "",
                    mobile: "",
                    roleName: ""
                }, json.data[i]);
            }
            return json.data
        },
        "type": "POST"
    },
    columns: [{
        data: 'name'
    }, {
        data: 'orgName'
    }, {
        data: 'roleName'
    }, {
        data: 'login'
    }, {
        data: 'mobile'
    }, ],
    "iDisplayLength": 20,
    "aLengthMenu": [
        [20],
        [20]
    ],
})

服务端分页

前端：

发送请求的时候，Datatable会自动传递（起码）三个参数：

start//起始数据条数，最小为0
length//查询条数（每页条数）
draw//请求次数，用来进行唯一识别

你可以加上额外的参数：

Paste_Image.png

语法：

"data":function(d){
    //可以这样写
    d.xx=xx;
    d.xxx=xxx;
    //也可以这样写
    $.extend(d, {
      //your data value
    });
}

服务端

返回的数据格式：

{
    "draw": 1,
    "recordsTotal": 57,
    "recordsFiltered": 57,
    "data": [
        {
            "name":"Angelica",
            "age":"Ramos",
            "office":"System Architect",
            "address":"London",
            "date":"9th Oct 09",
            "salary":"$2,875"
        },
        {
            "name":"Ashton",
            "age":"Cox",
            "office":"Technical Author",
            "address":"San Francisco",
            "date":"12th Jan 09",
            "salary":"$4,800"
        },
        ...
    ]
} 

Paste_Image.png

答疑

1. 初始化datatable后，我怎么再次根据查询条件去查询数据，然后再次渲染table了？
   确保你的datatable的里面有写传给服务端的额外参数，如上例中的personQuery.data其实是定义在datatable外部的一个变量，你可以先改变这个值，然后这样

dtTable.ajax.reload();

datatable就会去请求数据然后重新渲染了。

更多

具体还是文档比较清楚：
服务端分页
Datatables中文网