首页 > 代码库 > DataTables使用学习记录
DataTables使用学习记录
导入
<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/DataTables-1.10.12/media/css/jquery.dataTables.css">
<scripttype="text/javascript"charset="utf8"src="http://www.mamicode.com/DataTables-1.10.12/media/js/jquery.js"></script>
<scripttype="text/javascript"charset="utf8"src="http://www.mamicode.com/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#不定时一讲
DataTables使用学习记录