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

Posted 2021-01-21 m-yb

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了分页工具类前后台代码 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" 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
        }
        curPage -= 1
        listFlow(curPage)
    }

    // 下一页
    function next() {
        if (curPage == totalPage) {
            return
        }
        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>