【博客園cnblogs筆者m-yb原創, 轉載請加本文博客鏈接，筆者github: https://github.com/mayangbo666，公眾號aandb7，QQ群927113708】

https://www.cnblogs.com/m-yb/p/9986309.html

分頁功能的實現可以使用各種插件, 筆者今日閑來無事, 寫了 分頁工具類 前后臺代碼 Java JavaScript 的 實現及思路梳理.

供大家參考.

分頁功能的需求一般有: 當前頁/每頁條數/總頁數/總記錄數/起始記錄數/數據 等.

此工具類還可實現瀏覽器端修改每頁條數的需求.

話不多說, 上代碼:

先來后端的Java代碼分頁工具類

1 packagecom.github.mayangbo666.util;2

3 importjava.util.List;4

5 public class PageHolder{6

7 private int curPage;//當前頁

8 private int pageNum;//每頁條數

9 private int totalCount;//總記錄數

10 private int totalPage;//總頁數

11 private int offset;//起始記錄數

12 private List data;//數據

13

14 public PageHolder(int curPage, int pageNum, inttotalCount) {15 this.curPage =curPage;16 this.pageNum =pageNum;17 this.totalCount =totalCount;18 init();19 }20

21 private voidinit() {22 processTotalPage();23 processOffset();24 }25

26 private voidprocessTotalPage() {27 this.totalPage = (totalCount % pageNum) == 0 ? totalCount / pageNum : totalCount / pageNum + 1;28 }29

30 private voidprocessOffset() {31 this.offset = (curPage - 1) *pageNum;32 }33

34 public intgetCurPage() {35 returncurPage;36 }37

38 public intgetPageNum() {39 returnpageNum;40 }41

42 public intgetTotalCount() {43 returntotalCount;44 }45

46 public intgetTotalPage() {47 returntotalPage;48 }49

50 public intgetOffset() {51 returnoffset;52 }53

54 public ListgetData() {55 returndata;56 }57

58 public void setData(Listdata) {59 this.data =data;60 }61 }

Java代碼使用解釋如下:

使用時, 先從數據庫統計出帶條件的不分頁的總記錄條數totalCount;

然后創建要返回的?PageHolder(int curPage, int pageNum, int totalCount)對象;

通過該對象獲得?offset;

再用offset,?pageNum 分頁查出條件的List記錄;

視情況封裝如PageHolder;

再來看看?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

}

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 += '

'

msg += '

'+ flow.cardNum +''

msg += '

'+ flow.tradeAmount +''

msg += '

'+ flow.tradeType +''

msg += '

'+ flow.createTime +''

msg += '

'

}

$("#flowListDiv").html(msg)

}

})

}

JavaScript代碼這里稍微解釋一下:

listFlow函數傳入curPage;

發送ajax請求,后端返回AjaxVO對象(ps: 可找筆者的關于ajax前后端代碼的文章);

取出各記錄;

取出java分頁工具類返回的總頁數等信息, 通過函數curPageAndTotalPage(curPage, totalPage)寫入頁面;

for循環解析各記錄的各字段, 寫入頁面;

然后有每頁條數的下拉框當下拉框的值變化時, 觸發curPageAndTotalPage函數, 將新的值刷入頁面;

首頁/尾頁/上一頁/下一頁 則:

根據條件對當前頁賦值, 重新調用listFlow函數傳入curPage, 發送ajax請求去后天查一遍即可.

總結

以上是生活随笔為你收集整理的java ajax翻页_分页 工具类 前后台代码 Java JavaScript (ajax) 实现 讲解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。