分页 工具类 前后台代码 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代码分页工具类
package com.github.mayangbo666.util; import java.util.List; public class PageHolder<T> { private int curPage;// 当前页
private int pageNum;// 每页条数
private int totalCount;// 总记录数
private int totalPage;// 总页数
private int offset;// 起始记录数
private List<T> data;// 数据 public PageHolder(int curPage, int pageNum, int totalCount) {
this.curPage = curPage;
this.pageNum = pageNum;
this.totalCount = totalCount;
init();
} private void init() {
processTotalPage();
processOffset();
} private void processTotalPage() {
this.totalPage = (totalCount % pageNum) == 0 ? totalCount / pageNum : totalCount / pageNum + 1;
} private void processOffset() {
this.offset = (curPage - 1) * pageNum;
} public int getCurPage() {
return curPage;
} public int getPageNum() {
return pageNum;
} public int getTotalCount() {
return totalCount;
} public int getTotalPage() {
return totalPage;
} public int getOffset() {
return offset;
} public List<T> getData() {
return data;
} public void setData(List<T> data) {
this.data = data;
}
}
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 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 += '<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) 实现 讲解的更多相关文章
- PageUtil.java分页工具类
package com.chabansheng.util; /** * 分页工具类 * @author Administrator * */ public class PageUtil { /** * ...
- JAVA分页工具类
最近写了一个代码生成工具,分享下该工具下的分页工具 一.分页工具类 package com.qy.code.api.page; import java.io.Serializable; import ...
- Redis操作Set工具类封装,Java Redis Set命令封装
Redis操作Set工具类封装,Java Redis Set命令封装 >>>>>>>>>>>>>>>>& ...
- Redis操作List工具类封装,Java Redis List命令封装
Redis操作List工具类封装,Java Redis List命令封装 >>>>>>>>>>>>>>>> ...
- PHP常用之封装分页工具类
分页基本上是每个项目都会使用到的,所以呢,把它封装成一个工具类,以后直接调用就可以了(虽然TP框架的灰常强大,但是自己封一个也未尝不可.),这样既省时又省力还赚'工分'. 我封的这个分页工具类还比较完 ...
- c#分页工具类,完美实现List分页
using System; using System.Collections.Generic; using System.Linq; using System.Web; namespace Proje ...
- SpringBoot集成Mybatis-PageHelper分页工具类,实现3步完成分页
在Mybatis中,如果想实现分页是比较麻烦的,首先需要先查询出总的条数,然后再修改mapper.xml,为sql添加limit指令. 幸运的是现在已经不需要这么麻烦了,刘大牛实现了一个超牛的分页工具 ...
- 工具类 分页工具类PageParamBean
自己编写的分页工具类,根据不同的数据库类型,生成对应的分页sql信息,分享给大家,希望大家共勉,工具类有些地方,大家可能不需要,请根绝自己的需要进行修改使用,核心逻辑都在,如果大家觉得有什么不妥,欢迎 ...
- JAVA 分页工具类及其使用
Pager.java package pers.kangxu.datautils.common; import java.io.Serializable; import java.util.List; ...
随机推荐
- unity 根据平板 或者 手机 确立横竖屏
/* ######### ############ ############# ## ########### ### ###### ##### ### ####### #### ### ####### ...
- 【新特性】JDK1.7
一.switch中可以使用字串 String s = "test";switch (s) { case "test" : System.out.printl ...
- Operation not permitted
centos7 下,修改文件夹的权限时,报了这么一个错误.linux 下,此法依然奏效. 错误日志: chmod: changing permissions of '/opt/apps/images/ ...
- hdu 6006 Engineer Assignment 状压dp
Engineer Assignment Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Othe ...
- c++ std::advance
// advance example #include <iostream> // std::cout #include <iterator> // std::advance ...
- angular学习第1步
#### 最专业,最全面的angular的学习文档 https://www.jianshu.com/p/f0f81a63cbcb ### https://www.cnblogs.com/xiaowei ...
- [数据算法]D1.BloomFilter
BloomFilter是一种高效的去重算法,算法的要义是散列对比. 1.原理 当一个元素加入集合时,判断这个元素是否 2.举例 例如我要对URL去重(这个在爬虫上可以用): URL1 -> 3. ...
- CentOS6.5利用Docker部署ShowDoc
在Docker中部署ShowDoc 一.安装Docker 1.安装Docker yum install docker 最后出现Complete即可 2.启动服务 # service docker st ...
- 浅谈前端nuxt(ssr)
SSR: 服务端渲染(Server Side Render),即:网页是通过服务端渲染生成后输出给客户端. 一.那为什么要使用SSR呢? 我用一句话理解的就是降低SPA(Single Page App ...
- php国家或者编码英文字母排序
1.直接复制传入需要排序的字符,然后可以把返回的数据当key,传送给前台function getFirstCharter($str){ if(empty($str)){return '';} $fch ...