标签：mount amount process 解析 init Edito col his script
【博客园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) 实现 讲解
标签：mount amount process 解析 init Edito col his script
原文地址：https://www.cnblogs.com/m-yb/p/9986309.html
