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  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",  "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中定义的属性找到对象中的成员进行绑定，如果是数组的话，会按照数组中定义的数据依次绑定到每一列上进行展示。