JPages分页插件与后台分页

jpages是一款比较简洁的前端分页插件，能便捷的讲div、li等标签进行快速分页，但同样存在确定，即数据量较大时，前端分页对浏览器的内核要求过高，后台数据加载及查询也较慢，这时候就应考虑利用jpages的前端分页及后台配合调整，实现后台分页查询功能，实现步骤如下所述:

1、加载页面时后台查询总页数；

2、通过总页数，前台模拟分页，每一页可设置一个div（以div为例），通过jpages进行分页，代码如下所示

$.ajax({
     type : 'GET',
     data : { },
     url : “queryPages.do”,
     dataType : ‘json',
     contentType: 'application/json;charset=UTF-8',
     async : false,
     success : function(data) {
         // 页码
         var totalPageNum = data.totalPageNum;
         var pageHtml = "";
         for(var i = 1 ; i <= totalPageNum ; i++){
            // 添加分页
            pageHtml += "<div id='page-div-num-" + i + "'></div>";
          }
          $("#pageDiv").html(pageHtml);
          if(totalPageNum > 1){
             $("div.holder").css("display","block");
             // 分页
             $("div.holder").jPages({
                containerID  : " pageDiv ",
                 perPage      : 1,
                 startPage    : 1,
                 startRange   : 1,
                 midRange     : 5,
                 endRange     : 1
                });
           }else{
                $("div.holder").css("display","none");
           }
        },
        error : function(XMLHttpRequest, textStatus, errorThrown) {
            alert("获取信息失败！");
        }
  });

3、实现前端分页的关键是分页插件加载时，要添加callback事件，如下所示

$("div.holder").jPages({
          containerID  : " pageDiv ",
           perPage      : 1,
           startPage    : 1,
          startRange   : 1,
          midRange     : 5,
          endRange     : 1,
          callback : function(pages, items) {
              // 异步分页:初始化加载第一页
               var pageNum = $(".jp-current").text();
               queryPageInfo(pageNum);
           }
      });

4、queryPageInfo(pageNum) 根据页码访问后台获取对应数据并渲染数据