參考：

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中定義的屬性找到對象中的成員進行綁定，如果是數組的話，會按照數組中定義的數據依次綁定到每一列上進行展示。