Jquery Datatables的使用详解

参考：

Datatables中文网

Datatables官网

 Datatables 是一款强大的Jquery表格处理插件，样式方面可以兼容bootstrap3/4、JqueryUi等，也有默认的样式可以选择。使用Datatables可以很灵活的从服务端通过ajax更新表格数据，实现排序、分页等功能。

一、安装

登录官网下载，可以看到有一个选择的表单让你自定义下载包的内容，可以选择样式、扩展组件、Jquery库等，这个可以根据自己的需求下载，也可以先只下载Default的就可以了。

在你的项目中使用 DataTables，只需要引入三个文件即可，jQuery库，一个DataTables的核心js文件和一个DataTables的css文件。有的时候还需要DataTables样式的一些资源。

二、数据的绑定

如何将数据显示到Datatables中呢，有三种方式：

1. Dom

如果在html中生命的table标签下，tbody中有已经编辑好的数据的话，会直接显示出来。

<table id="table_id_example" class="display">
 <thead>
  <tr>
  <th>Column 1</th>
  <th>Column 2</th>
  </tr>
 </thead>
 <tbody>
  <tr>
  <td>Row 1 Data 1</td>
  <td>Row 1 Data 2</td>
  </tr>
  <tr>

2. JavaScript

可以在js中定义好数据源，然后在DT初始化的时候，通过data选项为表格配置数据，数据源可以是数组、对象、实例三种形式。

（1）数组

var data = [
 [
  "Tiger Nixon",
  "System Architect",
  "Edinburgh",
  "5421",
  "2011/04/25",
  "$3,120"
 ],
 [
  "Garrett Winters",
  "Director",
  "Edinburgh",
  "8422",
  "2011/07/25",
  "$5,300"
 ] ];
 $('#example').DataTable( {
 data: data
 } );

（2）实例

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

（3）对象

var data = [
 {
  "name": "Tiger Nixon",
  "position": "System Architect",
  "salary": "$3,120",								 
 1/10    1 2 3 4 5 6 下一页 尾页