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

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

listFlow函数传入curPage;

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

取出各记录;

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

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

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

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

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

原文地址：https://www.cnblogs.com/m-yb/p/9986309.html