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