最近在做一個報表展示的需求，有朋友推薦了一個基於jQuery的表格控件Datatables，免費開源，而且有很方便的分頁功能，還具有良好的交互性，在這裏做一下總結，希望可以幫助到需要做報表展示的朋友。
附上Datatables官網：https://www.datatables.net/，和中文社區：http://datatables.club，裏面有詳細的例子和各個配置文件的介紹，想要詳細瞭解的朋友可以去看看,接下來的部分我會記錄一些開發過程中總結的心得，歡迎網友留言探討。
1.初始化Datatables:
首先需要引用幾個js和css：
<script src="~/Scripts/jquery-1.12.3.min.js"></script>
<script src="~/Scripts/jquery.dataTables.min.js"></script>
<link href="~/Content/jquery.dataTables.min.css" rel="stylesheet" />jquery-1.12.3.min.js ，jquery.dataTables.min.js是必要的js引用，可以到分別到jquery官網和Datatables官網下載，其他網站上資源也很多，是必須要引用的兩個js庫。
jquery.dataTables.min.css 這個樣式文件也是來自官網的，是給生成的table加上相關的樣式，包括邊框，背景，長寬等等。
然後開始寫界面：
<html>
<head>
<script src="~/Scripts/jquery-1.12.3.min.js"></script>
<script src="~/Scripts/jquery.dataTables.min.js"></script>
<link href="~/Content/jquery.dataTables.min.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready(function () {
$('#person').dataTable({ // 和<table>的id對應，指定初始化datatables。
//填充的數據，這裏用的是靜態數據，數據源可以來自前臺，也可以來自服務器
"data": [
{ "name": "黃蓉","corpname":"丐幫","dynasty":"南宋","gender":"女","job":"丐幫幫主"},
{ "name": "楊過","corpname":"古墓派","dynasty":"南宋","gender":"男","job": "神鵰俠" }
],
//給列賦值，這裏的列名需要和data的數據名對應
"columns": [
{ "data": "name" },
{ "data": "corpname" },
{ "data": "dynasty" },
{ "data": "gender" },
{ "data": "job" }
]
});
});
</script>
</head>
<body>
<table id="person" class="display" cellspacing="0" style="width:100%">
<thead>
<tr>
<td>姓名</td>
<td>門派</td>
<td>朝代</td>
<td>性別</td>
<td>職業</td>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
</html>
運行如下：
