Wu Yudong's Blog

由于项目的后台cms使用的是ace admin前端框架，里面使用的是jquery datatable来显示数据，于是最近对其进行了一些深入的研究，接下来的文章记录一下。

1、首先需要引用下面两个文件
<link rel=”stylesheet” href=”https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css” />

2.1 数组

vardata = [
    [
        "Tiger Nixon",
        "System Architect",
        "Edinburgh",
        "5421",
        "2011/04/25",
        "$3,120"
    ],
    [
        "Garrett Winters",
        "Director",
        "Edinburgh",
        "8422",
        "2011/07/25",
        "$5,300"
    ]
]

2.2 对象

[
    {
        "name":       "Tiger Nixon",
        "position":   "System Architect",
        "salary":     "$3,120",
        "start_date": "2011/04/25",
        "office":     "Edinburgh",
        "extn":       "5421"
    },
    {
        "name":       "Garrett Winters",
        "position":   "Director",
        "salary":     "$5,300",
        "start_date": "2011/07/25",
        "office":     "Edinburgh",
        "extn":       "8422"
    }
]

2.3 自定义实例

function Employee ( name, position, salary, office ) {
    this.name = name;
    this.position = position;
    this.salary = salary;
    this._office = office;
    this.office = function() {
        returnthis._office;
    }
};   

$('#example').DataTable( {
    data: [
        newEmployee( "Tiger Nixon", "System Architect", "$3,120", "Edinburgh"),
        newEmployee( "Garrett Winters", "Director", "$5,300", "Edinburgh")
    ],
    columns: [
        { data: 'name'},
        { data: 'salary'},
        { data: 'office'},
        { data: 'position'}
    ]
} );

2.4 dataTable的数据来源

（1）DOM

如果没有指定data，ajax选项，则DataTable会将当前table的html标签上内容转换成对应的数据（Array数据形式）。

（2）Html5

Data-* 标签上可以指定不同的值，用于排序和查找，td内部标签的值对应当前单元格的数据。

<td data-search="21st November 2016 21/11/2016" data-order="1479686400">
    21st November 2016
</td>

（3）javascript

通过data配置，指定数据源。可以通过DataTables API row.add() row().remove()操作行数据。

（4）ajax

通过服务器端分页的方式，取得数据。返回的数据只能是json数组或对象（上面的2.1和2.2）.

3、两种分页方式

3.1 客户端分页

这种方式，代码最简单，整个数据量在10000条以内可以考虑。假设已经有了下面的table：

<table id="dynamic-table" >
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Score</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>001</td>
            <td>zhang</td>
            <td>98</td>
        </tr>
        <tr>
            <td>002</td>
            <td>wang</td>
            <td>99</td>
        </tr>
    </tbody>
</table>

简单调用一句话（使用默认设置），就可以使table具有排序，查找，分页的基本功能。代码如下：

$(function () {
    $("#dynamic-table").DataTable({
    });
});

3.2 服务器端分页

这种方式针对大数据量的table（10万条以上），每次只读取当前的一页数据，分页在后台做。代码相对复杂，不过页面响应更快，

服务器端的分页一般要求我们先定义thead表头，tbody可以不写。

jquery datatable（1）–基本使用

Comments