分页有多种方式，mysql的limit是个不错的选择，通过ajax实现异步刷新，将当前页数和每页数量传入后台即可
1. 首先后台要拿到总记录数和所需显示数据列表，所以要分别写两个sql方法
我这里是通过spring的注解方式写的sql，其它方法原理是一样的
/**
* 礼品列表(分页)
*/
@Select("select * from t_coupons limit ${firstnum},${maxnum}")
public List
/\*\*
\* 礼品列表总条数
\*/
@Select("select count(\*) from t\_coupons")
public int countlist();
2. 再是service的处理，这里因为每条显示数量由后台控制，所以只需要传入当前页数就行，如有需要可自己加
/** * 礼品列表 */ public 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)<parseInt(all)){ 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
这行代码不能变，其它都是可以根据界面需求自己改的
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; i<data[0].length; i++){ var info = data[0][i]; html +="
在加载页面时，可以默认传1也就是第一页执行此方法
以上基本就能实现一个ajax分页，且通用性高，需要改动的地方不多
