當(dāng)需要展示表格時(shí)，使用該框架可以大大簡(jiǎn)化開發(fā)，引入dataTables后溉苛，只需要將所有數(shù)據(jù)輸出到table并簡(jiǎn)單初始化，dataTables將幫你良好的實(shí)現(xiàn)分頁弄诲，搜索愚战，排序等。
/*
代碼片段：使用datatables.js實(shí)現(xiàn)用戶列表
*/
//引入庫(kù)文件
<link.../>
<script ...></script>
...
//jsp部分 表格添加datatable類及擁有了datable表格樣式齐遵，但沒有功能
<table class="table table-striped table-bordered bootstrap-datatable datatable">
<thead>
<tr>
<th>姓名</th>
<th>手機(jī)號(hào)</th>
<th>樓號(hào)-單元-樓層-房號(hào)</th>
<th>身份證號(hào)</th>
<th>查看詳細(xì)信息</th>
</tr>
</thead>
<tbody>
<s:iterator value="ownerInfoList">
<tr>
<td>${cName} </td>
<td>${cTel}</td>
<td>${cBuildingNo}-${cUnitNo}-${cFloor}-${cId}</td>
<td>${cIdcardNo}</td>
<td class="center">
<a class="btn btn-info" href="${pageContext.request.contextPath}/owner/showOwnerInfoDetail.action?cUserno=${cUserno}&cHouseId=${cHouseId}">
<i class="halflings-icon white user"></i>
</a>
</td>
</tr>
</s:iterator>
</tbody>
</table>
//javascript部分
$(document).ready(function() {
//為`.datables`調(diào)用DataTable方法寂玲，使其擁有DataTable表格功能
dataTable = $('.datatable').DataTable({
//設(shè)置參數(shù)
"dom": "<'row-fluid'<'span6'l><'span6'f>r>t<'row-fluid'<'span12'i><'span10 center'p>>",
"pagingType": "bootstrap",
"language": {
"lengthMenu": "_MENU_ 條記錄/頁",
"search" : "查找 : ",
"info": "當(dāng)前顯示第 _START_ - _END_ 條/共 _TOTAL_ 條",
infoEmpty: "沒有記錄",
zeroRecords: "沒有查找到記錄",
infoFiltered: "(查找了 _MAX_ 條記錄)",
"paginate" : {
"next": "下一頁",
"previous":"上一頁"
},
aaSorting:[[0,"desc"]],
select: {
rows: "選中 %d 行"
}
}
});
})
//https://datatables.net/examples/basic_init/zero_configuration.html 官網(wǎng)零配置案例
項(xiàng)目效果圖
