标签:
通过Ajax调用js方法进行局部刷新分页,大大减少性能消耗
下面是js代码,可封装成js文件
/** * 分页的改变 * @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); } }
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; }
Ajax请求实例
//获取礼品统计列表 function getCouponDataList(nowPage){ $(".remove").remove(); $.ajax({ url:path + "/couponData/couponList", 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.title+"</td>" +" </tr>"; } $(".insert").append(html); }, error:function(e){ alert("错误"); } }); }
//上一页 1 下一页 2
function change(i){
var pageShowId = "pageShow-up";
var nowPage = pageChange(pageShowId, i);
getCouponDataList(nowPage);
};
html代码
<span id="pageShow-up" class="btn_page">1/1</span>
以上大致就是全部代码
标签:
原文地址:http://www.cnblogs.com/angto64/p/5147378.html