分页有多种方式，mysql的limit是个不错的选择，通过ajax实现异步刷新，将当前页数和每页数量传入后台即可
1. 首先后台要拿到总记录数和所需显示数据列表，所以要分别写两个sql方法
我这里是通过spring的注解方式写的sql，其它方法原理是一样的
/**
* 礼品列表(分页)
*/
@Select("select * from t_coupons limit ${firstnum},${maxnum}")
public List<Coupon> list(@Param("firstnum") long firstnum,@Param("maxnum") long maxnum); /**
* 礼品列表总条数
*/
@Select("select count(*) from t_coupons")
public int countlist();
2. 再是service的处理，这里因为每条显示数量由后台控制，所以只需要传入当前页数就行，如有需要可自己加
/**
* 礼品列表
*/
public List<Object> list(int pageNow) {
//每页显示条数
int pageNum = 5;
//开始条数
int beginNum = (pageNow - 1) * pageNum;
//查询
List<Coupon> couponDataTotal = couponDataDao.list(beginNum, pageNum);
//总条数
int count = couponDataDao.countlist();
//总页数
int allPage = PageUtil.countPageByCountAndpageNum(count, pageNum);
//数据集合
List<Object> list = new ArrayList<Object>();
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)<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界面
<div class="table-cont">
<table width="100%" border="0" class="ins" cellspacing="0" cellpadding="0">
<tr class="tbHead">
<td>部门机构（支行）名称</td>
<td>已分配</td>
<td>价值</td>
<td>已发放</td>
<td>价值</td>
<td>库存</td>
<td>价值</td>
<td>已领取</td>
<td>未领取</td>
<td>已使用</td>
<td>未使用</td>
<td>使用中</td>
<td>操作</td>
</tr>
</table>
</div> <div class="pager tc">
<input name="" type="button" value="上一页" onclick="change(1)" class="btn_prev" />
<span id="pageShow-up" class="btn_page">1/1</span>
<input name="" type="button" value="下一页" onclick="change(2)" class="btn_next" />
<input name="" type="button" value="返回" onclick="javascript:history.go(-1)" class="btn_back" />
</div>
其实只有
<span id="pageShow-up" class="btn_page">1/1</span>
这行代码不能变，其它都是可以根据界面需求自己改的
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 +=" <tr class='cl remove'>"
+" <td>"+info.branch_name+"</td>"
+" <td>"+info.puted_num+"份</td>"
+" <td>"+info.sum_price+"元</td>"
+" <td>"+info.send_num+"份</td>"
+" <td>"+info.send_price+"元</td>"
+" <td>"+info.last_num+"份</td>"
+" <td>"+info.last_price+"元</td>"
+" <td>"+info.receive_num+"份</td>"
+" <td>"+info.not_receive+"份</td>"
+" <td>"+info.used_num+"份</td>"
+" <td>"+info.notuse_num+"份</td>"
+" <td>"+info.useing_num+"份</td>"
+" <td>"
+" <input name='' type='button' value='查看' class='btn_red' onclick='toManagerCouponData("+info.branch_id+")'/>"
+" </td>"
+" </tr>";
}
$(".ins").append(html);
},
error:function(e){
alert("错误");
}
});
}
在加载页面时，可以默认传1也就是第一页执行此方法
以上基本就能实现一个ajax分页，且通用性高，需要改动的地方不多