使用JQuery插件进行分页

在上一篇 PageHelper分页 中，手写分页的逻辑，重用性不高。那么，有没有更好的方式？

有，可以使用 JS 插件来实现分页，目前我掌握了两种 JS 分页插件的用法

• twbs-pagination
• simplePagination.js

下面分别说明一下两者的用法，其实都差不多，只是有一些细节不一样而已，不过不大。

twbs-pagination

首先在页面上添加一个分页容器，我用的是 Admin LTE 的 Bootstrap 后台 UI 框架，所以是这么写

<ul id="pagination" class="pagination pagination-sm no-margin pull-right"></ul>

然后是 JS 的代码

$(document).ready(function () {
    $('#pagination').twbsPagination({
        totalPages: ${pageInfo.getPages()},
        startPage: ${pageInfo.getPageNum()},
        first: "首页",
        prev: "上一页",
        next: "下一页",
        last: "尾页",
        initiateStartPageClick: false,
        onPageClick: function (event, page) {
            window.location.href = '${pageContext.request.contextPath}/admin/tag/list?pageNum=' + page;
        }
    });
});

这一段 JS 代码做了几项工作

• totalPages：总页数
• startPage: 当前页
• first、prev、next、last：翻页按钮的文字
• initiateStartPageClick：是否一加载 JS 就立刻调用 onPageClick 的回调函数
• onPageClick：点击翻页按钮时的回调函数

simplePagination.js

同样的，首先在页面上添加一个分页容器

<ul id="pagination" class="pagination pagination-sm no-margin pull-right"></ul>

然后是 JS 的代码

$(document).ready(function () {
    $('#pagination').pagination({
        items: ${pageInfo.getPages()},
        currentPage: ${pageInfo.getPageNum()},
        cssStyle: '',
        prevText: '上一页',
        nextText: '下一页',
        onPageClick: function (page, evt) {
            window.location.href = '${pageContext.request.contextPath}/admin/tag/list?pageNum=' + page;
        }
    });
});

这段 JS 代码和上面的一样，只是配置的名字不同而已