PS:前面忘了给大家讲解后台需要做的 ,同步分页的时候,我们只需要定义一个方法,给前台传递一个page对象,前台接收到直接展示即可;异步分页要多一步,首先还是写一个方法,传递初始对象,后面的ajax返回的时候需要再定义一个方法,作为分页数据刷新。
上一篇文章为给大家讲到了同步分页,封装完整,复用性高,但是缺点就是每次点击的时候需要刷新整个界面,碍于开发的需要,当某些界面存在几个分页的时候缺点就出来了,于是又在这个基础上做了一些小调整,使用了ajax的方式,实现局部刷新分页,现在把代码给大家共享一下:
1、JSP页面跟同步分页差不多
a)、不在只是局限于只定义一个form表单,可以在每个需要分页的地方都写一个; <div> <div class="color size14" style="margin-top: 95px"> 账号记录 </div> <div class="table-responsive" style="margin-top: 20px;margin-left: 0"> <table id="sample-table-1" class="table table-striped table-bordered table-hover" style="margin-left: 0"> <thead> <tr> <th>序号</th> <th>操作人</th> <th>操作时间</th> <th>操作描述</th> <th>内容</th> <th>结果</th> </tr> </thead> <tbody id="operLog-tbody"> <%--分页内容--%> <c:forEach items="${operLogPage.list}" var="operlog" varStatus="status"> <tr> <td>${status.index+1}</td> <td>${operlog.operater}</td> <td>${operlog.updateTime}</td> <td>${operlog.remark}</td> <td>${operlog.operName}</td> <td>${operlog.result}</td> </tr> </c:forEach> </tbody> </table> </div> <div class="page"> <form class="submitPage operlogForm" action="${ctx}/admin/userManage/getOperLogPagination" > </form> </div> </div>
2、将同步分页的page.js里面的整体封装成一个方法,方便重复调用:
<!--基本信息分页--> function getOperlogPage(operlogCurpage,operlogTotalPage,formName) { var curPageNum = 1; var curtotalpage = 4; curPageNum = operlogTotalPage; //前5页//后5页 //需要计算开始页数 var startpage = 1; if (operlogCurpage == null) { operlogCurpage = 1; } if (operlogCurpage <= 3) { startpage = 1; } else { startpage = operlogCurpage - 3 + startpage; } var prepage = operlogCurpage - 1; var nextpage = parseInt(operlogCurpage) + 1; var endpage = startpage + curtotalpage; if (endpage > operlogTotalPage) { endpage = operlogTotalPage; } var front = operlogCurpage - 3; var back = parseInt(operlogCurpage) + 2; //上一页 if (prepage >= 1) { var prepage = '<input class="inp pages" id="oper_pre" type="button" value="上一页" onclick="nextOperlogPageToForm(' + prepage + ')">'; $(prepage).appendTo(formName); } //前省略 if (front > 0) { var qiandian = '<input class="inp nob" type="button" value="1" onclick="nextOperlogPageToForm(1)">'; qiandian += '<input class="inp dian mr" type="button" value="..."> '; formName.append(qiandian); } //页码 for (var i = startpage; i <= endpage; i++) { var wtpage = null; if (i == operlogCurpage) { wtpage = '<input class="inp nob active" type="button" value="' + i + '" onclick="nextOperlogPageToForm(' + i + ')">'; } else { wtpage = '<input class="inp nob" type="button" value="' + i + '" onclick="nextOperlogPageToForm(' + i + ')">'; } $(wtpage).appendTo(formName); } //后省略 if (back < operlogTotalPage && operlogTotalPage > 5) { var houdian = '<input class="inp dian mr" type="button" value="..."> '; houdian += '<input class="inp nob" type="button" value="' + operlogTotalPage + '" id="oper_total" onclick="nextOperlogPageToForm(1)">'; formName.append(houdian); } //下一页 if (nextpage <= operlogTotalPage) { var nextcontent = '<input class="inp pages" id="oper_next" type="button" value="下一页" onclick="nextOperlogPageToForm(' + nextpage + ')" >'; $(nextcontent).appendTo(formName); } //跳转页码 var pageNum1 = ' 第 <input class="inp nob inner" type="text" id="operlog-input" value="' + operlogCurpage + '" > 页 '; formName.append(pageNum1); var pageNum2 = '<a href="javascript:jumpOperlog();" class="color6">跳转</a>'; formName.append(pageNum2); }
3、JSP页面调用方法:
var curPageNum=1; getOperlogPage('${operLogPage.pageNo}','${operLogPage.totalPage}',$(".operlogForm"));
4、ajax分页:
//上一页/下一页 首页/尾页 适用于带form参数 function nextOperlogPageToForm(pageNo){ if( $(document).find(".operlogForm").length > 0){ $("<input id='pageNo' name='pageNo' type='hidden' value=""+pageNo+"">").appendTo(".operlogForm"); $.ajax({ type: "POST", url: "${ctx}/admin/userManage/getOperLogPagination", data: { id:${model.id}, pageNo:pageNo }, success:function(data){ $("#sample-table-1 tr:not(:first)").html(""); var operLogVo = data.list; for(var i = 0;i<operLogVo.length;i++){ $("#operLog-tbody").append(" " +" <tr>" +"<td>"+(i+1)+"</td>" +"<td>"+(operLogVo[i].operater)+"</td>" +"<td>"+(operLogVo[i].updateTime)+"</td>" +"<td>"+(operLogVo[i].remark)+"</td>" +"<td>"+(operLogVo[i].operName)+"</td>" +"<td>"+(operLogVo[i].result)+"</td>" ); } } }); $(".operlogForm").empty(); getOperlogPage(pageNo,'${operLogPage.totalPage}',$(".operlogForm")); /* $(".operlogForm").find('.nob').removeClass('active'); $(".operlogForm").find('input[value="'+pageNo+'"]').addClass('active');*/ } }
5、效果与前者一样,还是给大家看看图片