【博客園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請求去後天查一遍即可.

分頁 工具類 前後臺代碼 Java JavaScript (ajax) 實現 講解