分页工具类前后台代码 Java JavaScript (ajax) 实现讲解

【博客园cnblogs笔者m-yb原创, 转载请加本文博客链接，笔者github: https://github.com/mayangbo666，公众号aandb7，QQ群927113708】
https://www.cnblogs.com/m-yb/p/9986309.html
分页功能的实现可以使用各种插件, 笔者今日闲来无事, 写了 分页工具类 前后台代码 Java JavaScript 的 实现及思路梳理.
供大家参考.
分页功能的需求一般有: 当前页/每页条数/总页数/总记录数/起始记录数/数据 等.
此工具类还可实现浏览器端修改每页条数的需求.
话不多说, 上代码:
先来后端的Java代码分页工具类

 1 package com.github.mayangbo666.util;
 2 
 3 import java.util.List;
 4 
 5 public class PageHolder<T> {
 6 
 7     private int curPage;// 当前页
 8     private int pageNum;// 每页条数
 9     private int totalCount;// 总记录数
10     private int totalPage;// 总页数
11     private int offset;// 起始记录数
12     private List<T> data;// 数据
13 
14     public PageHolder(int curPage, int pageNum, int totalCount) {
15         this.curPage = curPage;
16         this.pageNum = pageNum;
17         this.totalCount = totalCount;
18         init();
19     }
20 
21     private void init() {
22         processTotalPage();
23         processOffset();
24     }
25 
26     private void processTotalPage() {
27         this.totalPage = (totalCount % pageNum) == 0 ? totalCount / pageNum : totalCount / pageNum + 1;
28     }
29 
30     private void processOffset() {
31         this.offset = (curPage - 1) * pageNum;
32     }
33 
34     public int getCurPage() {
35         return curPage;
36     }
37 
38     public int getPageNum() {
39         return pageNum;
40     }
41 
42     public int getTotalCount() {
43         return totalCount;
44     }
45 
46     public int getTotalPage() {
47         return totalPage;
48     }
49 
50     public int getOffset() {
51         return offset;
52     }
53 
54     public List<T> getData() {
55         return data;
56     }
57 
58     public void setData(List<T> data) {
59         this.data = data;
60     }
61 }

Java代码使用解释如下:

使用时, 先从数据库统计出带条件的不分页的总记录条数totalCount;

然后创建要返回的 PageHolder(int curPage, int pageNum, int totalCount)对象;

通过该对象获得 offset;

再用offset, pageNum 分页查出条件的List记录;

视情况封装如PageHolder;

再来看看 JavaScript代码:

<script type="application/javascript" >
    // author mayangbo666
    // 作者 mayangbo666

    var curPage = 1
    var pageNum = 1 // 每页条数
    var totalPage = 1

    // 首页
    function first() {
        curPage = 1
        listFlow(curPage)
    }

    // 尾页
    function last() {
        curPage = totalPage
        listFlow(curPage)
    }

    // 上一页
    function pre() {
        if (1 >= curPage){
            return false        
　　　　　}

            }
        })
    }
</script>

JavaScript代码这里稍微解释一下:

listFlow函数传入curPage;

发送ajax请求,后端返回AjaxVO对象(ps: 可找笔者的关于ajax前后端代码的文章);

取出各记录;

取出java分页工具类返回的总页数等信息, 通过函数curPageAndTotalPage(curPage, totalPage)写入页面;

for循环解析各记录的各字段, 写入页面;

然后有每页条数的下拉框<select><option>当下拉框的值变化时, 触发curPageAndTotalPage函数, 将新的值刷入页面;

根据条件对当前页赋值, 重新调用listFlow函数传入curPage, 发送ajax请求去后天查一遍即可.