js构造分页

js构造分页

第一步

html部分

<div class="goin_main_two_left">

   <div class="">

                    消费记录

                </div>

                  <form id="borrowListForm">

 <table class="jth-table" width="100%" border="0" cellspacing="0" cellpadding="0">

                    <thead class="table-nstyle-thead"  style="border-top:1px dashed #000 ! important">

                    <td><strong> 消费时间</strong></td>

                    <td><strong> 消费金额</strong></td>

                    <td><strong> 消费内容</strong></td>

                    <td><strong> 获取收益</strong></td>

                    </thead>

                  <tbody class="table_td"  id="consumption" name="consumption">

                </table>

                </form>

   <div id="pager_exp" class="layout" ></div>

</div>

第二步

构造数据

function borrowQuery(page)

{var lastPage=0;//最大页码

    $.getJSON("${path}/GoldCoinManagement/findExp.html?" + new Date().getTime(),{

            "page": page

        },

        function (data) {  

            $.each(data, function (k, v) {

                if (k == "resultCode" && v == 0 ) {                          

                    $("#consumption").html("<tr align='center' ><td colspan='4'>没有记录</td></tr>");

                } else if (k == "borrowQuety") {

                    //构造数据HTML

                    var html = "";

                    if (v != '') {

                        $.each(v, function (kk, vv) {

                         html += "<tr class='bbd' style='border-top:1px dashed #000 ! important;border-bottom:1px dashed #000 ! important;' >";

                          html += "<th hieght='60'>"+vv.edtTime+"</th>";

                          html += "<th>"+vv.edtNum+"</th>";

                          html += "<th>"+vv.edtWay+"</th>";

                          html += "<th>"+vv.bak+"</th>";

                            html += "</tr>";

                        });

                        $("#consumption").html(html);

                    } else {

                        $("#consumption").html("<tr align='center' ><td colspan='4'>没有记录</td></tr>");

                    }

                } else

                if(k=="lastPage")

                   {

                   lastPage=v;//最大页码

                   }else

                   if (k == "page") {

                        //构造分页HTML  

                       var p = v;  //当前页码

                        var mathod="borrowQuery";//调用方法

                        var divName="#pager_exp";//构造分页DIV name

                       var pageMath=3;//省略号前面最大页码

                        goborrowPagejin(p,lastPage,mathod,divName,pageMath);

                                     

                   }

            });

        });

}

第三部构造分页

/**

 * @author zhangzh

 * @param 构造分页

 * @addTiem 2017-8-13

 * */

<script type="text/javascript" src="${path}/static/js/pagePaing.js"></script>

js文件

function goborrowPagejin(p,lastPage,mathod,divName,pageMath) {

if(p>lastPage)

{

p=lastPage;

}

var totalPages=lastPage;

    var pagehtm = "";

    pagehtm = pagehtm + "<ul class='pagination '>";

    pagehtm = pagehtm + "<li><a + (p == 1 ? 1 : p - 1) + ");'>&laquo;</a></li>";

    var curp = p;

    var pageMaxO=0;

    var pageO=0;

    var pageT=0;

    if(totalPages<pageMath)

    {

    pageMaxO=totalPages;

    }

    else

    {

    pageMaxO=pageMath;

    }

  for (var i = 1;i<=pageMaxO; i++) {

          if (i == p) {

              pagehtm = pagehtm + "<li class='active'><a + i + ");'>" + i + "</a></li>";

          } else {

              pagehtm = pagehtm + "<li ><a + i + ");'>" + i + "</a></li>";

          }

      }

   if(p==pageMath && lastPage>pageMath)

  {

 pagehtm = pagehtm + "<li ><a </a></li>";

 } 

   

if(p>pageMath)

 {

if(p==(pageMath+1))

{

  pageO=(pageMath+1);

  if(p+1<totalPages)

  {

  pageT=p+1;

  }

  else

  {

  pageT=totalPages;

  }

}

else

{

pagehtm = pagehtm + "<li class=''><a href=''>***</a></li>";

  if(p+1<totalPages)

  {

  pageT=p+1;

  }

  else

  {

  pageT=totalPages;

  }

pageO=p-1;

}

  for (var i = pageO; i <=pageT; i++) {

          if (i == p) {

              pagehtm = pagehtm + "<li class='active'><a + i + ");'>" + i + "</a></li>";

          } else {

              pagehtm = pagehtm + "<li ><a + i + ");'>" + i + "</a></li>";

          }

      }}  

 

    pagehtm = pagehtm + "<li><a + (p == totalPages ? totalPages : p + 1) + ");'>&raquo;</a></li>";

    pagehtm = pagehtm + " </ul>";

     $(""+divName+"").html(pagehtm);

}