pagination实现分页条

1.导入pagination.css，jquery.pagination.js文件

2.在分页的页面引入上面两个文件

<link rel="stylesheet" href="css/pagination.css">
<script type="text/javascript" src="jquery/jquery.pagination.js"></script>

3.代码实现

 <tfoot>
           <tr>
                 <td colspan="6" align="center">
                     <div id="Pagination" class="pagination"><!-- 这里显示分页 --></div>
                 </td>
             </tr>
</tfoot>


<script type="text/javascript">
    $(function () {
        initPagination()
    });

    //生成页码的导航条
    //回调函数的作用是显示对应分页的列表项内容
    //回调函数在用户每次点击分页链接的时候执行
    //参数pageIndex{int整型}表示当前的索引页
    function initPagination() {
        //获取总记录数
        var totalRecord=${pageInfo.total}
        //声明一个JSON对象存储Pagination要设置的属性
        var properties={
            num_edge_entries: 3,  //边缘页数
            num_display_entries: 5,  //主体页数
            callback: pageselectCallback, //用户点击页码实现页码跳转
            items_per_page: ${requestScope.pageInfo.pageSize}, //每页显示数量
            current_page: ${requestScope.pageInfo.pageNum-1},//Pagination内部使用pageIndex来管瘤页码从0开始
        }
        //生成页码导航条
        $("#Pagination").pagination(totalRecord,properties);
    }
    //回调函数的含义：声明出来以后不是自己调用，而是交给系统或框架调用
    //用户点击页码实现页码跳转

    function pageselectCallback(pageIndex, jq){
        //根据pageIndex计算得到pageNum
        var pageNum=pageIndex+1
        //跳转页面
        window.location.href="admin/get/page.html?pageNum="+pageNum+"&keyword=${param.keyword}";
        //由于每个页码按钮都是超链接，所以在这个函数最后取消超链接的默认行为
        return false;
    }
</script>