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

  • 相关阅读:
    XML相关知识点
    MLPlatform开发日志
    1.0 es6 箭头函数
    基本数学概念
    4.4 thymeleaf使用补充
    vim操作手册
    eclise创建后台项目
    正则表达式
    数据库隔离级别
    1. gradle的使用教程
  • 原文地址:https://www.cnblogs.com/pretttyboy/p/5976483.html
Copyright © 2020-2023  润新知