//引入css和js文件
<link rel="stylesheet" href="${ctx}/static/plugins/datatables/dataTables.bootstrap.css">
<script src="${ctx}/static/plugins/datatables/jquery.dataTables.min.js"></script>
<script src="${ctx}/static/plugins/datatables/dataTables.bootstrap.min.js"></script>
//正文 保證table thead tbody 等標簽的完整性
<div class="box-body table-responsive no-padding" style="overflow-x:hidden"> //下面過長的滾動條取消
<table class="table table-hover table-text" id="resourcetable"> //通過id來確定分頁查詢的table
<thead>
<tr class="tabth">
<th>序號</th>
<th>上級菜單</th>
<th>目錄類型</th>
<th>菜單名稱</th>
<th>URL</th>
<th>說明</th>
<th style="padding-left: 20px;">操作</th>
</tr>
</thead>
<tbody>
<c:forEach items="${list}" var="list" varStatus="s">
<tr>
<td>${ s.index + 1}</td>
<td><c:if test="${list.parentresourcename==null}">根目錄</c:if>
<c:if test="${list.parentresourcename!=null}">${list.parentresourcename}</c:if>
</td>
<td><c:if test="${list.sourcetype==1}">左側菜單</c:if>
<c:if test="${list.sourcetype==2}">頂部菜單</c:if>
</td>
<td>${list.resourcename}</td>
<td>${list.url}</td>
<td>${list.memo}</td>
<td>
<a class="fa fa-trash fa-lg text-danger" href="javascript:deleteresource(${list.id});"></a>
<a class="fa fa-pencil fa-lg" style="margin-left: 30px;" href="javascript:updateresource(${list.id});"></a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
</div><!-- /.box-body -->
$(function () { //獲取id的table
$('#resourcetable').DataTable({
"bJQueryUI": true,
"oLanguage": { // 語言設置
"sLengthMenu": "每頁顯示 _MENU_ 條記錄",
"sZeroRecords": "抱歉， 沒有找到",
"sInfo": "從 _START_ 到 _END_ /共 _TOTAL_ 條數據",
"sInfoEmpty": "沒有數據",
"sInfoFiltered": "(從 _MAX_ 條數據中檢索)",
"sZeroRecords": "沒有檢索到數據",
"sSearch": "搜索:",
"oPaginate": {
"sFirst": "首頁",
"sPrevious": "前一頁",
"sNext": "后一頁",
"sLast": "尾頁"
}
}
});
});