项目开发之分页---异步分页（ajax）
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、效果与前者一样，还是给大家看看图片
