datatables是一款非常流行的基于jquery的表格插件，使用這個(gè)插件可以輕松地實(shí)現(xiàn)對(duì)表格的排序、搜索、分頁(yè)和多語(yǔ)言支持等功能，在開發(fā)中非常方便。

datatables主要由兩個(gè)版本，即jquery版本和原生javascript版本，這里我們主要介紹jquery版本的使用。

首先，我們需要下載datatables的jquery版本文件，這里我們以1.10.23版本為例，可以從官網(wǎng)下載：https://datatables.net/download/。

<link rel="stylesheet" type="text/css" >
<script type="text/javascript" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js"></script>

下載完成后，我們?cè)趆tml文件中引入相應(yīng)的文件，如上面的代碼所示。接著，我們需要在table標(biāo)簽中使用一些特殊的屬性進(jìn)行初始化：

<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
...
</tbody>
</table>

我們使用class屬性為table添加display樣式，然后在javascript中使用下面的代碼初始化datatables：

$(document).ready(function() {
$('#example').DataTable();
} );

最后，我們還可以自定義一些datatables的屬性和樣式，如下：

$(document).ready(function() {
$('#example').DataTable({
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"language": {
"url": "http://cdn.datatables.net/plug-ins/9dcbecd42ad/i18n/Chinese.json"
}
});
} );

這里我們定義了每頁(yè)顯示的記錄數(shù)和語(yǔ)言，最終的效果可以參考官網(wǎng)的演示：https://datatables.net/examples/basic_init/zero_configuration.html