mysql分页(ajax)

2018-02-27 11:01:00来源:oschina作者:architect刘源源人点击

分享

分页有多种方式,mysql的limit是个不错的选择,通过ajax实现异步刷新,将当前页数和每页数量传入后台即可


1. 首先后台要拿到总记录数和所需显示数据列表,所以要分别写两个sql方法


我这里是通过spring的注解方式写的sql,其它方法原理是一样的


复制代码


/**
* 礼品列表(分页)
*/
@Select("select * from t_couponslimit ${firstnum},${maxnum}")
public List list(@Param("firstnum") long firstnum,@Param("maxnum") long maxnum);
/**
* 礼品列表总条数
*/
@Select("select count(*) from t_coupons")
public int countlist();

复制代码


2. 再是service的处理,这里因为每条显示数量由后台控制,所以只需要传入当前页数就行,如有需要可自己加


复制代码


/**
* 礼品列表
*/
public List list(int pageNow) {
//每页显示条数
int pageNum = 5;
//开始条数
int beginNum = (pageNow - 1) * pageNum;
//查询
List couponDataTotal = couponDataDao.list(beginNum, pageNum);
//总条数
int count = couponDataDao.countlist();
//总页数
int allPage = PageUtil.countPageByCountAndpageNum(count, pageNum);
//数据集合
List list = new ArrayList();
list.add(couponDataTotal);
list.add(allPage);
return list;
}

复制代码


后台返回的是一个object数据,包含数据列表和总页数


3. 接下来就是前端处理了,我同事写了一个公共js,只需要引用js和一行html即可实现上一页、下一页的控制效果和当前页数、总页数的显示,觉得很不错,所以拿来用了


复制代码


/**
* 分页的改变
* @param pageShowId分页显示的id
* @param i(1 上一页,2 下一页,3 当前页,4 第一页)
* @returns操作过后的页数(当前页)
*/
function pageChange(pageShowId,i){
if(i == 1){
clickUp(pageShowId);
}else if(i == 2){
clickNext(pageShowId);
}else if(i == 4){
setPageNum(pageShowId, 1, 1);
}
var nowPage = getPageNum(pageShowId, 1);
return nowPage;
}
/**
* 点击上一页的时候触发
*/
function clickUp(pageShowId){
var now = getPageNum(pageShowId,1);
if(now==1){
nowPage = 1;
}else if(now>1){
nowPage = parseInt(now) - 1;
}
setPageNum(pageShowId,1,nowPage);
}
/**
* 点击下一页时触发
* @param pageShowId
* @returns
*/
function clickNext(pageShowId){
var now = getPageNum(pageShowId,1);
var all = getPageNum(pageShowId,2);
if(now==all){
nowPage = all;
}else if(parseInt(now) nowPage = parseInt(now) + 1;
}else{
nowPage = 1;
}
setPageNum(pageShowId,1,nowPage);
}
/**
* 获取分页(pageShowId 显示分页的id,index 1为当前页,2为总页)
*/
function getPageNum(pageShowId,index){
var pageText = $("#"+pageShowId+"").text();
var strs= new Array(); //定义一数组
strs = pageText.split("/");
if(index==1){
return strs[0];
}else if(index==2){
return strs[1];
}
}
/**
* 设置分页(pageShowId 显示分页的id,index 1为当前页,2为总页,str 是要修改的字符串)
*/
function setPageNum(pageShowId,index,str){
var pageText = $("#"+pageShowId+"").text();
var strs= new Array(); //定义一数组
strs = pageText.split("/");
if(index==1){
//修改当前页
$("#"+pageShowId+"").text(str+"/"+strs[1]);
}else if(index==2){
//修改总页
$("#"+pageShowId+"").text(strs[0]+"/"+str);
}
}

复制代码


这个js基本不用改,直接引用然后配合下面的html代码,基本通用


4. 然后是html界面


复制代码



















部门机构(支行)名称 已分配 价值 已发放 价值 库存 价值 已领取 未领取 已使用 未使用 使用中 操作



1/1



复制代码


其实只有


1/1

这行代码不能变,其它都是可以根据界面需求自己改的


5. 最后就是通过ajax将当前页数传入后台即可


复制代码


//获取支行礼品统计列表
function getBranchCouponDataList(nowPage){
$(".remove").remove();
$.ajax({
url:path + "/couponData/branchCouponData",
type:"POST",
dataType: "json",
data:{nowPage:nowPage},
success:function(data){
//设置总页数
setPageNum("pageShow-up", 2, data[1]);
var html = '';
for(var i=0; ivar info = data[0][i];
html +=" "
+" "+info.branch_name+""
+" "+info.puted_num+"份"
+" "+info.sum_price+"元"
+" "+info.send_num+"份"
+" "+info.send_price+"元"
+" "+info.last_num+"份"
+" "+info.last_price+"元"
+" "+info.receive_num+"份"
+" "+info.not_receive+"份"
+" "+info.used_num+"份"
+" "+info.notuse_num+"份"
+" "+info.useing_num+"份"
+" "
+""
+" "
+" ";
}
$(".ins").append(html);
},
error:function(e){
alert("错误");
}
});
}

在加载页面时,可以默认传1也就是第一页执行此方法


以上基本就能实现一个ajax分页,且通用性高,需要改动的地方不多

微信扫一扫

第七城市微信公众平台