DataTables使用学习记录

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

导入

<scripttype="text/javascript"charset="utf8"src="DataTables-1.10.12/media/js/jquery.js"></script>

<scripttype="text/javascript"charset="utf8"src="DataTables-1.10.12/media/js/jquery.dataTables.js"></script>

三个核心概念

处理模式

DataTables 中有两种不同的方式处理数据(排序、搜索、分页等):

客户端处理（Client）—— 所有的数据集预先加载（一次获取所有数据），数据处理都是在浏览器中完成的【逻辑分页】。
服务器端处理（ServerSide）—— 数据处理是在服务器上执行（页面只处理当前页的数据）【物理分页】。

每种模式都有自己的优点和缺点,选择哪种模式是由你的数据量决定的。根据经验来看,数据少于 10,000 行你可以选择客户端模式,超过 10,000 行的使用服务器端处理。请注意,两种处理模式不能同时使用,但是可以动态更改从一个模式到另一个。

服务器模式需要启用 serverSideOption 属性

数据类型

DataTables使用的数据源必须是一个数组，数组的每一项将显示在你定义的行上面，其使用三种基本的js数据作为数据源：分别是数组(Arrays[])，对象，(objects{})实例，(new myclass())默认的操作模式是数组，而对象和实例能处理更复杂的数据

数组

数组在DT中很容易使用，当使用数组作为数据源，每个数组元素的数量必须等于表中列数

对象

只需要使用一个属性的名字。比如data.name,而不是data[0]

实例

实例可以定义成抽象的方法来更新数据

数据源

DT支持三种数据源显示分别是DOM,JS,Ajax

常用选项(Common options)

下面列举了一些比较有用的选项:

ajax - 异步数据源配置
data - javascript数据源配置
serverSide - 开启服务器模式
columns.data - 配置每一列的数据源
scrollX - 水平滚动条
scrollY - 垂直滚动条

Datatables拥有一个强大的API可以用来操作表格中的数据，他有下面六个关键部分:

表格
列
行
单元格
核心方法
工具类

Datatables完整的方法列表，请参考API

一个datatables实例可以通过下面三个方法实现:

$( selector ).DataTable();
$( selector ).dataTable().api();
new $.fn.dataTable.Api( selector );

主要是要注意$( selector ).DataTable()与$( selector ).dataTable()两者之间的区别.前者返回一个datatable中API实例,而后者返回一个jQuery对象.一个api()方法添加到jQuery对象,这样你可以很轻松地访问API. 但是jQuery对象可以用于操纵表节点,与任何其他jQuery实例一样(像addClass()).

实用方法链接http://datatables.club/blog/listall.html#不定时一讲