jQuery的Pagination分页插件

插件官方文档地址http://pagination.js.org/index.html

插件简介

此jQuery插件为Ajax分页插件，一次性加载，故分页切换时无刷新与延迟，如果数据量较大不建议用此方法，因为加载会比较慢。

举例示范

第一步准备对应的js和css

我们需要准备三样东西分别是

1. jquery的js文件
2. pagination的js文件
3. pagination的css文件

第二步编写js代码用于分页的具体设置

我们线举例示范我们如何使用Paginatgion分页插件。
使用方法十分简单，通过获取到我们分页导航栏的dom元素，然后打点调用pagination方法即可。

分页导航栏如下

<div id="Pagination" class="pagination"><!-- 这里面的页码都是动态生成的 --></div>

	// 获取总记录数
	var totalRecord = ${requestScope.pageInfo.total};
	$("#Pagination").pagination(totalRecord , {
	    num_edge_entries: 3, //边缘页数
            num_display_entries: 5, //主体页数
            callback: pageSelectCallback,
            // ${}是jsp的el表达式就是用于设置每页显示几行数据的
            items_per_page:${requestScope.pageInfo.pageSize}, //每页显示几行数据
            //pageination的页数是从0开始的，pagehelper的页数从1开始，所以要减1。${}是jsp的el表达式就是用于获取当前页码数的
            current_page: ${requestScope.pageInfo.pageNum-1},//该属性用于获取当前页码数
            prev_text: "上一页",
            next_text: "下一页",
	});
	// 回调函数的含义就是声明出来后不是自己调用而是别人去调用。
    // 用户点击“上一页、1、2、3、下一页”这样的页码时实现页面的跳转
    function pageSelectCallback(pageIndex,jQuery) {
        // pageIndex就是当前页码数，从零开始的，因为这个参数是pageInation给我们传进来的
        // 根据pageIndex计算得到pageNum
        var pageNum = pageIndex +1;
        // 跳转到对应的页面
        window.location.href = "admin/get/page.html?pageNum="+pageNum;
        // 由于每个页码按钮都是超链接，所以在这个函数的最后取消超链接的默认行为
        return false;

    }

这段代码表示的含义是：总共有totalRecord (maxentries)个列表项，首尾两侧分页显示3(num_edge_entries)个，连续分页主体数目显示5(num_display_entries)个，回调函数为pageSelectCallback(callback)，每页显示的列表项为pageSize(items_per_page)个。

第三步修改它自带的js代码中的最后一行

为什么要修改呢？
我们来看它原本的js代码中的最后一部分

它先进行绘制链接，所谓绘制链接就是将我们的分页导航栏渲染出来，生成这样的效果，如图（该图不是我们例子中最终生成的样子）

按理说绘制链接完成后就结束了，就不需要再做别的了，但是它原本的js库中还进行调用了回调函数，本来应等用户点击页码数的时候调用回调函数的，但是它现在调用了。
然后执行回调函数中的window.location进行跳转，这个跳转就相当于刷新页面了，然后他就重新绘制链接，然后调用回调函数，然后继续重新绘制链接，继续调用回调函数。画图示意

如此便陷入了死循环，它就会一直刷新页面

所以我们需要将最后一行调用回调函数给删掉就可以正常运行了。

参数说明