JQuery分页插件的使用

简介

现在网上各种各样的分页组件很多，但是很难找到十分“称心如意”的，于是jqPaginator诞生了。
我心中理想的分页组件，要不受CSS框架限制，可以使用在各种不同风格中的网页中。以我浅显的经验来看，要达到这个目标，关键的一点就是高度自定义的Html结构。所以jqPaginator努力做到合理范围内的自定义，使其灵活的使用了各种不同的场景。

官网http://jqpaginator.keenwon.com/

下载

下载jquery,下载插件jqpaginator,下载bootstrap

https://download.csdn.net/download/qq_37126480/12067348

引入JQuery、BootStrap、jqpaginator

<script src="js/jquery-3.3.1.js"></script>
<script src="js/jqpaginator.min.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">

第一步、定义显示分页条的容器

在页面定义一个标签容器，这个容器里就是我们未来要显示的分页条

<!-- 分页按钮 -->
<div class="footer">
    <ul class="pagination" id="pagination0"></ul>
</div>

第二步、初始化分页条

初始化分页条
总页数插件自己算，不用管

$.jqPaginator('#pagination0', {//这个选择器是容器的ID，必须和第一步的ID对应
    totalCounts:1, //总记录数是1,先写死
    pageSize:10,//每页显示10条记录
    visiblePages: 10,//分页条显示10个页码
    currentPage: 1,//默认是第一页
    first:'<li class="first"><a href="javascript:;">首页</a></li>',
    last:'<li class="first"><a href="javascript:;">尾页</a></li>',
    prev : '<li class="prev"><a href="javascript:;">上页</a></li>',
    next : '<li class="next"><a href="javascript:;">下页</a></li>',
    page : '<li class="page"><a href="javascript:;">{{page}}</a></li>',
    onPageChange: function (num, type) {//num表示被点击的那个页码
        console.log(num);
    }
});

第三步、编写onPageChange函数

该函数在分页条初始化完毕后会被执行一次，并且num=1
之后在每次点击页码的时候都会触发一次
分析后发现：这个函数中我们可以干两件事
1.把当前页码和每页显示的记录书以ajax形式发送给服务器
2.将写死的totalCounts配置更新为真实数据
代码如下

onPageChange: function (num, type) {//num表示被点击的那个页码
    console.log("当前被点击的是第"+num+"页");
    /*
       做两件事
         1.想servlet发送请求，请求当前页的数据
         2.将写死的totalCounts修改为真实的总记录数
   */
    $.get("route/pageQuery",
          {
            cid:location.search.split("=")[1],
            currentPage:num,
            pageSize:10
          },function (pageBean) {
            //用真实记录数替换原有写死的记录数
            $('#pagination0').jqPaginator('option', {
                totalCounts: pageBean.totalCount
           }
     );
    });
}

完整代码

$(function () {
            $.jqPaginator('#pagination0', {//这个选择器是容器的ID
                totalCounts:100, //总记录数是1
                pageSize:10,//每页显示10条记录
                visiblePages: 10,//分页条显示10个页码
                currentPage: 1,//默认是第一页
                first:'<li class="first"><a href="javascript:;">首页</a></li>',
                last:'<li class="first"><a href="javascript:;">尾页</a></li>',
                prev : '<li class="prev"><a href="javascript:;">上页</a></li>',
                next : '<li class="next"><a href="javascript:;">下页</a></li>',
                page : '<li class="page"><a href="javascript:;">{{page}}</a></li>',
                onPageChange: function (num, type) {//num表示被点击的那个页码
                    console.log("当前被点击的是第"+num+"页");
                    search(num);
                }
            });
            /**
             * 做两件事
             *  1.想servlet发送请求，请求当前页的数据
             *  2.将写死的totalCounts修改为真实的总记录数
             * @param num 当前正在被点击的页码
             */
            function search(num){
                $.get("route/pageQuery",
                    {
                        cid:location.search.split("=")[1],
                        currentPage:num,
                        pageSize:10
                    },function (pageBean) {
                    $('#pagination0').jqPaginator('option', {
                        totalCounts: pageBean.totalCount
                    });
                });
            }
        })

后端

后端只需要返回总记录数counts和查询结果lists即可
后端需要接受的数据:currentPage,pageSize,查询条件

分页对象 PageBean

@Data
@NoArgsConstructor
@AllArgsConstructor
public class PageBean<T> {
    private List<T> rows;//要显示的数据
    private Integer count;//总记录数
    
     ...省略set/get方法   toString等方法
}

创建一个ResultInfo实体类 用来封装对象

@Data
@AllArgsConstructor
@NoArgsConstructor
public class ResultInfo implements Serializable {
    private boolean flag;//后端返回结果正常为true，发生异常返回false
    private Object data;//后端返回结果数据对象
    private String errorMsg;//发生异常的错误消息
    
    ...省略set/get方法   toString等方法
}

Servlet页面的方法

public ResultInfo queryPageByCid(HttpServletRequest request, HttpServletResponse response) {
        try {
            String cid_ = request.getParameter("cid");
            if (StringUtils.isEmpty(cid_)) {   //获取页面的cid
                cid_ = "1";
            }
            int cid = Integer.parseInt(cid_);

            String currentPage_ = request.getParameter("currentPage");
            if (StringUtils.isEmpty(currentPage_)) {
                currentPage_ = "1";
            }
            int currentPage = Integer.parseInt(currentPage_);

            String pageSize_ = request.getParameter("pageSize");
            if (StringUtils.isEmpty(pageSize_)) {
                pageSize_ = "10";
            }
            int pageSize = Integer.parseInt(pageSize_);

            //调用service

            PageBean<Route> pageBean = routeService.queryPage(cid, currentPage, pageSize);
            return new ResultInfo(true, pageBean, null);
        } catch (Exception e) {
            e.printStackTrace();
            return new ResultInfo(false, null, "分页查询失败" + e.toString());
        }
    }