Datatables 是一款强大的Jquery表格处理插件，样式方面可以兼容bootstrap3/4、JqueryUi等，也有默认的样式可以选择。使用Datatables可以很灵活的从服务端通过ajax更新表格数据，实现排序、分页等功能。
一、安装
登录官网下载，可以看到有一个选择的表单让你自定义下载包的内容，可以选择样式、扩展组件、Jquery库等，这个可以根据自己的需求下载，也可以先只下载Default的就可以了。
在你的项目中使用 DataTables，只需要引入三个文件即可，jQuery库，一个DataTables的核心js文件和一个DataTables的css文件。有的时候还需要DataTables样式的一些资源。
二、数据的绑定
如何将数据显示到Datatables中呢，有三种方式：
1. Dom
如果在html中生命的table标签下，tbody中有已经编辑好的数据的话，会直接显示出来。
<table> <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", "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" } ]; //object可以如下初始化表格 $('#example').DataTable( { data: data, //使用对象数组，一定要配置columns，告诉 DataTables 每列对应的属性 //data 这里是固定不变的，name，position，salary，office 为你数据里对应的属性 columns: [ { data: 'name' }, { data: 'position' }, { data: 'salary' }, { data: 'office' } ] } );
可以看到，在html中定义好一个id是example的table后，可以使用DT提供的选项进行初始化，data是数据，可以将要展示的数据对象放到data选项后，然后通过columns选项为每一列的属性进行定义，DT就会根据columns中定义的属性找到对象中的成员进行绑定，如果是数组的话，会按照数组中定义的数据依次绑定到每一列上进行展示。
3. Ajax
前两种数据源的处理模式都是客户端处理，显然这不能满足大多数时候对于表格的要求。还好DT提供了一种可以通过Ajax与后端服务交互的方法，可以直接将后端提供的数据直接展示到表格上，分页和排序也很方便。后面的篇幅会侧重说DT如何通过Ajax如何与服务端完成数据交互。
三、通过选项完成一个服务端处理模式的Datatables
datatables中大量的选项可以用来定制你的表格展现给用户。
举个例子
datatables的配置是通过设置你定义的选项来完成的，如下：
$('#example').DataTable( { paging: false } );
通过设置paging选项，禁止表格分页(默认是打开的)
假设你要在表格里使用滚动，你需要加上scrollY选项：
$('#example').DataTable( { scrollY: 400 } );
当然你可以组合多个选项来初始化datatables，启动滚动条，禁用分页
$('#example').DataTable( { paging: false, scrollY: 400 } );
再比如在上面说到的data选项和columns选项都是一种初始化定制DT的方法。
可以看到，通过DataTable(object)函数可以进行DT的定制，object是一个对象，对象中的每个成员变量都应该是一个DT的选项。
因为我们在一个项目中可能会用到多个DT，那有些选项其实是通用的，举个例子如果A、B的表格都允许排序并且允许检索，正常会写成：
$('#a).DataTable( { searching: true, ordering: true } ); $('#b).DataTable( { searching: true, ordering: true } );
当使用的表格多了后，后续维护会非常的麻烦，所以可以将通用的选项提取出来，然后再通用选项的基础上定制每个DT。