工学1号馆

home

jquery datatable(1)–基本使用

Wu Yudong    December 20, 2018     HTML5+CSS3   737   

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

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

<script src=”https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js”></script>
2,DataTable支持的数据类型
https://www.datatables.net/manual/data/

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可以不写。

如果文章对您有帮助,欢迎点击下方按钮打赏作者

Comments

No comments yet.
To verify that you are human, please fill in "七"(required)