bootstrap DataTable 插件的使用

//引入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": "尾页"
}
}
});
});