首页 > 代码库 > 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使用学习记录