初始化datatables之後，可以看到我們的數據在頁面的顯示，除了顯示功能，datatables還提供了多種特性方便我們對錶格進行操作，例如排序，分頁，頁面內搜索等等。
我們可以選擇是否開啓這些功能，只需要初始化的時候進行對應屬性的設置。
$('#example').dataTable( {
//在這裏進行設置
} );
下面是完整代碼：
<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。
"processing": true, //是否顯示處理狀態
"info": true, //是否顯示table左下角的記錄數信息
"lengthChange": true, //是否允許用戶改變每頁的數據數量
"ordering": true, //是否啓用排序功能
"paging": true, //是否開啓本地分頁功能
"searching": true, //是否開啓頁面搜索功能
"stateSave": true, //是否開啓狀態保存，刷新頁面保留在原頁面
//填充的數據，這裏用的是靜態數據，數據源可以來自前臺，也可以來自服務器
"data": [
{ "name": "黃蓉", "corpname": "丐幫", "dynasty": "南宋", "gender": "女", "job": "丐幫幫主" },
{ "name": "郭靖", "corpname": "丐幫", "dynasty": "南宋", "gender": "男", "job": "抗金領袖" },
{ "name": "楊過", "corpname": "古墓派", "dynasty": "南宋", "gender": "男", "job": "神鵰俠" },
{ "name": "李莫愁", "corpname": "古墓派", "dynasty": "南宋", "gender": "女", "job": "反派" },
{ "name": "任我行", "corpname": "日月神教", "dynasty": "不明", "gender": "男", "job": "日月神教教主" },
{ "name": "令狐沖", "corpname": "華山派", "dynasty": "不明", "gender": "男", "job": "華山首徒" },
{ "name": "嶽不羣", "corpname": "華山派", "dynasty": "不明", "gender": "男", "job": "華山派掌門" },
{ "name": "左冷禪", "corpname": "嵩山派", "dynasty": "不明", "gender": "男", "job": "嵩山派掌門" },
{ "name": "張無忌", "corpname": "明教", "dynasty": "元朝", "gender": "男", "job": "明教教主" },
{ "name": "韋小寶", "corpname": "天地會", "dynasty": "清朝", "gender": "男", "job": "青木堂堂主" },
{ "name": "康熙", "corpname": "清政府", "dynasty": "清朝", "gender": "男", "job": "皇帝" },
{ "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>