分页 工具类 前后台代码 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代码分页工具类

package com.github.mayangbo666.util;

import java.util.List;

public class PageHolder<T> {

    private int curPage;// 当前页
    private int pageNum;// 每页条数
    private int totalCount;// 总记录数
    private int totalPage;// 总页数
    private int offset;// 起始记录数
    private List<T> data;// 数据

    public PageHolder(int curPage, int pageNum, int totalCount) {
        this.curPage = curPage;
        this.pageNum = pageNum;
        this.totalCount = totalCount;
        init();
    }

    private void init() {
        processTotalPage();
        processOffset();
    }

    private void processTotalPage() {
        this.totalPage = (totalCount % pageNum) == 0 ? totalCount / pageNum : totalCount / pageNum + 1;
    }

    private void processOffset() {
        this.offset = (curPage - 1) * pageNum;
    }

    public int getCurPage() {
        return curPage;
    }

    public int getPageNum() {
        return pageNum;
    }

    public int getTotalCount() {
        return totalCount;
    }

    public int getTotalPage() {
        return totalPage;
    }

    public int getOffset() {
        return offset;
    }

    public List<T> getData() {
        return data;
    }

    public void setData(List<T> data) {
        this.data = data;
    }
}

Java代码使用解释如下:

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

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

通过该对象获得 offset;

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

视情况封装如PageHolder;

再来看看 JavaScript代码:

<script type="application/javascript" id="my">
    // 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        
　　　　　}

        curPage -= 1
        listFlow(curPage)
    }

    // 下一页
    function next() {
        if (curPage >= totalPage) {
            return false
        }
        curPage += 1
        listFlow(curPage)
    }

    // 当前页 / 总页数
    function curPageAndTotalPage(a, b) {
      $('#curPage_totalPage').html(a + '/' + b)
    }

    function getPageNum(pageNumN) {
        pageNum = pageNumN
        listFlow(curPage)
    }

    function listFlow(curPage) {
        $.ajax({
            type: 'post',
            dataType: 'json',
            url: '/listFlow',
            data: {
                cardNum: $("#cardDiv").val(),
                password: $("#pwd").val(),
                curPage: curPage,
                pageNum: pageNum
            },
            success: function (dataResult) {
                if (!dataResult.success){
                    alert(dataResult.message)
                    return false
                }

                var flows = dataResult.data.data

                totalPage = dataResult.data.totalPage
                curPageAndTotalPage(curPage, totalPage)

                var msg = '该卡还没有交易数据'

                for (var i=0; i< flows.length; i++){
                    var flow = flows[i]
                    msg += '<tr class="gradeX">'
                    msg += '<td>'+ flow.cardNum +'</td>'
                    msg += '<td>'+ flow.tradeAmount +'</td>'
                    msg += '<td>'+ flow.tradeType +'</td>'
                    msg += '<td>'+ flow.createTime +'</td>'
                    msg += '</tr>'
                }
                $("#flowListDiv").html(msg)
            }
        })
    }
</script>

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

listFlow函数传入curPage;

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

取出各记录;

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

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

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

首页/尾页/上一页/下一页 则:

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