利用JQuery寫一個簡單的異步分頁插件

2019-11-20 10:26:17

字體：大中小

來源：轉載

供稿：網友

寫了一個Jquery異步分頁插件，拿出來分享一下，有不完善之處請指教。
以用戶分頁為例，先看一下效果，首先是第一頁：

下一頁或者點擊第二頁后：

點擊尾頁后：

效果還可以吧？來看看具體怎么用，首先后臺要有一個Page模型：
Page.java：

public class Page {    /**   * 當前頁號   */  private int currPageNum = 1;      /**   * 總記錄數   */  private int totalRowSize = 0;    /**   * 每頁記錄數   */  private int pageRowSize = 10;    public int getCurrPageNum() {   return currPageNum;  }   public void setCurrPageNum(int currPageNum) {   this.currPageNum = currPageNum;  }   public int getTotalPageNum() {   int total = (totalRowSize%pageRowSize==0)?(totalRowSize/pageRowSize):(totalRowSize/pageRowSize+1);   return total;  }   public int getTotalRowSize() {   return totalRowSize;  }   public void setTotalRowSize(int totalRowSize) {   this.totalRowSize = totalRowSize;  }   public int getPageRowSize() {   return pageRowSize;  }   public void setPageRowSize(int pageRowSize) {   this.pageRowSize = pageRowSize;  }   public int getFirstResult(){   if(getCurrPageNum()<=0) return 0;      return getPageRowSize() * (getCurrPageNum() - 1);  }   public int getMaxResult() {   return this.getFirstResult()+this.getPageRowSize();  }   }

然后看list_user.jsp：

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">  <head>  <title>異步分頁</title>  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  <link href="../css/local.css" rel="stylesheet" type="text/css" />  <script type="text/javascript" src="../js/jquery-1.4.2.min.js"></script>  <script type="text/javascript" src="../js/asyn_page.js"></script>  <script type="text/javascript">  var totalRowSize = ${totalRowSize};  $(document).ready(function(){   $("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize);  });    //構建內容  function buildHtml(users){   $.each(users,function(i,user){    var tr = [     '<tr>',      '<td>',user.userId,'</td>',      '<td>',user.username,'</td>',      '<td>',user.sex,'</td>',      '<td>',user.age,'</td>',      '<td>',user.email,'</td>',      '<td>',user.address,'</td>',      '<td>',user.registerTime,'</td>',      '<td></td>',     '</tr>'    ].join('');    $("#tbody").append(tr);   });  }  </script>  </head>  <body>  <table>   <thead>   <tr>    <th>ID</th>    <th>用戶名</th>    <th>性別</th>    <th>年齡</th>    <th>Email</th>    <th>地址</th>    <th>注冊時間</th>    <th>操作</th>   </tr>   </thead>   <tbody id="tbody"></tbody>  </table>  <div id="pageWidget" class="page"></div>  </body> </html>

可以看到id為tbody的元素是作為分頁內容展示容器，id為pageWidget的元素作為分頁控件展示容器。
然后提供了一個buildHtml()函數來具體構建分頁內容的。
使用異步分頁插件很簡單，只要這么調用：

$("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize);

這是最簡化調用。還可以傳額外查詢參數，以及定制每頁顯示記錄數，具體使用方式見插件的具體介紹。
下面是asynPage插件內容：

/*  * ===================AJAX異步分頁=================  *  * Copyright 2012 8 23, zhutx  *  * 假設id為pageWidget的div是你放置分頁控件的容器，則按如下形式調用：  * $("#pageWidget").asynPage("/user/findUser_asyn.action","#tbody",buildHtml,totalRowSize,{"pageRowSize":10});  * 參數說明：  * ------------Required-----------  * 參數一：請求URL  * 參數二：渲染結果集的頁面容器  * 參數三：負責渲染結果集到頁面的函數  * 參數四：總記錄數  * ------------Optional-----------  * 參數五(json對象)：  * 屬性pageRowSize:每頁記錄數(不配置，則默認為20)  * 屬性param:請求參數(json格式)  */ (function($){  var settings;  var page;  var paramStr;    $.fn.asynPage = function(url,contentContainer,buildHtml_fun,totalRowSize,callerSettings){     settings = $.extend({    currPageNum:1,    pageRowSize:20,    param:null   },callerSettings||{});     settings.contentContainer = $(contentContainer);   settings.url = url;   settings.pageWidget = this;   settings.totalRowSize = totalRowSize;   settings.buildHtml_fun = buildHtml_fun;      page = new Page(settings.currPageNum,settings.totalRowSize,settings.pageRowSize);      paramStr = makeParamStr(settings.param);      //開始獲取數據   fetchData(page.getCurrPageNum());      return this;  };    /* 將json轉換為請求參數字符串 */  var trunParamConfig2RequestParamStr = function(json){   var str = "";   for(key in json){    if(str==""){     str += key+"="+json[key];    }else{     str += "&"+key+"="+json[key];    }   }   return str;  };    /* 將配置參數拼接為請求字符串 */  var makeParamStr = function(param_json){   if(param_json==null){    return "";   }else{    return trunParamConfig2RequestParamStr(param_json);   }  };    /*   * 負責獲取后臺數據，獲取完畢后會觸發構建分頁控件   */  var fetchData = function(currPageNum){      page.setCurrPageNum(currPageNum);   var firstResult = page.getFirstResult();   var maxResult = page.getMaxResult();   var pageRowSize = page.getPageRowSize();      var data = null;   if(paramStr){    data = paramStr + "&page.currPageNum="+currPageNum+"&page.pageRowSize="+pageRowSize+"&page.firstResult="+firstResult+"&page.maxResult="+maxResult;   }else{    data = "page.currPageNum="+currPageNum+"&page.pageRowSize="+pageRowSize+"&page.firstResult="+firstResult+"&page.maxResult="+maxResult;   }      $.ajax({    type :"POST",    url : settings.url,    data :data,    success :function(datas){     settings.contentContainer.empty();     settings.buildHtml_fun(datas);     buildPageWidget(page);//觸發構建分頁控件    },    error:function(xmlHttpRequest,textStatus,errorThrown){     if(textStatus == "error"){      var error = eval('('+xmlHttpRequest.responseText+')');      alert("Sorry："+error.errorCode+"，"+error.message+"！");     }    }   });  };    var trunTargetPage = function(pageNum){   fetchData(pageNum);  }    /* 為分頁控件綁定事件 */  var bindEvent = function(){   var links = settings.pageWidget.find("a");   $.each(links,function(i,link){    var link = $(link);    var pageNum = link.attr("pageNum");    link.click(function(){     trunTargetPage(pageNum);    });   });  }    /* 構建分頁控件的具體算法實現 */  var buildPageWidget = function(page){      //構建分頁控件前，先清理現有控件   settings.pageWidget.empty();      /* --------------- 下面開始進入真正的分頁控件構建過程 -------------- */      /* --------------- 1.開始：構建描述信息（如“共？頁，？條記錄”） ----------------- */   settings.pageWidget.append("<div class='total'>共<span>"+page.getTotalPageNum()+"</span>頁 <span>"+page.getTotalRowSize()+"</span>條記錄</div>");   settings.pageWidget.append("<ul>");   /* --------------- 1.結束：構建描述信息（如“共？頁，？條記錄”） ----------------- */      /* --------------- 2.開始：構建“首頁”和“上一頁”控件 ------------- */   var currPageNum = Number(page.getCurrPageNum());   var totalPageNum = Number(page.getTotalPageNum());      if(currPageNum==1){    //如果你希望當前頁是第一頁的時候，也允許“首頁”和“上一頁”控件出現，則可以在這里進行補充   }else{    settings.pageWidget.find("ul").append("<li><a id='' pageNum='1' href='javascript:void(0);' title='首頁' class='first'>首頁</a></li>");    settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+(currPageNum-1)+"' href='javascript:void(0);' title='上一頁' class='prev'>上一頁</a></li>");   }   /* --------------- 2.結束：構建“首頁”和“上一頁”控件 ------------- */      /* --------------- 3.開始：構建分頁數字控件 -------------- */   if(totalPageNum<10){    for(var i=1;i<=totalPageNum;i++){     if(i==currPageNum){      settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");     }else{      settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='javascript:trunTargetPage("+i+");'>"+i+"</a></li>");     }    }   //如果總頁數>=10   }else{    //如果當前頁小于5，則顯示1-9項，且記憶當前項    if(currPageNum<5){     for(var i =1;i<10;i++){      if(i==currPageNum){       settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");      }else{       settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class=''>"+i+"</a></li>");      }     }    //如果當前頁>=5，且總頁數與當前頁的差<4    }else if(totalPageNum-currPageNum<4){     for(var i=totalPageNum-8;i<=totalPageNum;i++){      if(i==currPageNum){       settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");      }else{       settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class=''>"+i+"</a></li>");      }     }    //如果當前頁>=5，則顯示圍繞當前頁的9項，且記憶當前項     }else{     for(var i=currPageNum-4;i<currPageNum+5;i++){      if(i==currPageNum){       settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void(0);' title='' class='current'>"+i+"</a></li>");      }else{       settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+i+"' href='javascript:void("+i+");' title='' class=''>"+i+"</a></li>");      }     }    }   }   /* --------------- 3.結束：構建分頁數字控件 -------------- */      /* --------------- 4.開始：構建“下一頁”和“尾頁”控件 ------------- */   if(totalPageNum==currPageNum){    //如果你希望當前頁是最后一頁的時候，也允許“尾頁”和“下一頁”控件出現，則可以在這里進行補充   }else{    settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+(currPageNum+1)+"' href='javascript:void(0);' title='下一頁' class='next'>下一頁</a></li>");    settings.pageWidget.find("ul").append("<li><a id='' pageNum='"+totalPageNum+"' href='javascript:void(0);' title='尾頁' class='last'>尾頁</a></li>");   }   /* --------------- 4.結束：構建“下一頁”和“尾頁”控件 ------------- */      //還要為控件綁定點擊事件   bindEvent();  }   })(jQuery);  /*  * Page類  */ function Page(currPageNum,totalRowSize,pageRowSize){  this.currPageNum = currPageNum;  this.totalRowSize = totalRowSize;  this.pageRowSize = pageRowSize; } Page.prototype.getCurrPageNum = function(){  return this.currPageNum; }; Page.prototype.setCurrPageNum = function(currPageNum){  this.currPageNum = currPageNum; }; Page.prototype.getTotalPageNum = function(){  return (this.totalRowSize%this.pageRowSize==0)?(this.totalRowSize/this.pageRowSize):(Math.floor(this.totalRowSize/this.pageRowSize)+1); }; Page.prototype.getTotalRowSize = function(){  return this.totalRowSize; }; Page.prototype.setTotalRowSize = function(totalRowSize){  this.totalRowSize = totalRowSize; }; Page.prototype.getPageRowSize = function(){  return this.pageRowSize; }; Page.prototype.setPageRowSize = function(pageRowSize){  this.pageRowSize = pageRowSize; }; Page.prototype.getFirstResult = function(){  if(this.getCurrPageNum()<=0) return 0;  return this.getPageRowSize() * (this.getCurrPageNum() - 1); }; Page.prototype.getMaxResult = function(){  return this.getFirstResult() + this.getPageRowSize(); };

以上就是本文的全部內容，希望對大家的學習有所幫助。

上一篇：jquery+json實現分頁效果

下一篇：基于jquery編寫分頁插件