java ajax实现分页代码_分页 工具类 前后台代码 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 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请求去后天查一遍即可.