使用jquery中的dataTables实现列表的分页

dataTables是⼀个jquery的插件，可以进行分页和实时查找数据。

官⽹：https://datatables.net/

1.引入

（1）jquery.js (本地引⼊，CDN)

（2）dataTables（本地引⼊，CDN）

官方提供的CDN:

//cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js

使用CDN引用的一个好处：许多用户在访问其他站点时，已经从百度、又拍云、新浪、谷歌或微软加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN 都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。

2.对数据表格进⾏初始化

datatables可以支持不同的数据源，我们角色列表是对已经加载好数据的表格进⾏分页处理

主要对表格进行操作，表格代码展示

<div class="compete_list">
        <table id="sample-table-1" class="table table-striped table-bordered table-hover">
            <thead>
            <tr>
                <th class="center"><label><input type="checkbox" class="ace"><span class="lbl"></span></label></th>
                <th width="150">角色编号</th>
                <th width="300">角色名称</th>
                <th class="hidden-480">角色描述</th>
                <th class="hidden-480">操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${roleList}" var="role">
            <tr>
                <td class="center"><label><input type="checkbox" class="ace"><span class="lbl"></span></label></td>
                <td>${role.roleId}</td>
                <td>${role.roleName}</td>
                <td>${role.roleDesc}</td>
                <td>
                    <a title="编辑" onclick="role_modify('560')" href="javascript:;" class="btn btn-xs btn-info"><i
                            class="fa fa-edit bigger-120"></i></a>
                    <a title="删除" href="javascript:;" onclick="role_del(this,'1')" class="btn btn-xs btn-warning"><i
                            class="fa fa-trash  bigger-120"></i></a>
                </td>
            </tr>
            </c:forEach>
            </tbody>
        </table>

 下面这个语句就是实现分页和查询，排序的关键

查询：输入框输入查询内容查询出该表中所有包含查询关键字的行

<script type="text/javascript">

 $("#sample-table-1").DataTable({});

</script>

1. 分页效果

 2.查询效果