js代碼

function PageSystem(count, divID, grountCount, callBack) {
     this.totolCount = count; //總記錄數(shù)
     this.initMaxPage = grountCount? grountCount: 5;  //顯示頁數(shù)，如 1 2 3 4 5
     this.pageSize = 10;  //每頁記錄數(shù)
     this.currentMax = 0; //當前顯示的最大頁碼, 如 1 2 3 4 5; 5為最大頁碼
     this.currentMin = 0; //當前顯示的最小頁碼, 如 11 12 13 14 15; 11為最小頁碼
     this.homePage = 0; //首頁
     this.endPage = 0; //未頁
     this.currentPage = 0; //當前頁
     this.currentActiveSpan; //當前活動a容器
     this.pageDivObj = document.getElementById(divID); //分頁系統(tǒng)容器
     this.pages = 0; //總頁數(shù)，計算得到
     //this._url = _url; //提交URL
     this.callBack = callBack; //回調(diào)
     var that = this; //指針的引用
     
    
     this.init = function() {
        this.pages = parseInt(this.totolCount / this.pageSize); //獲得總共有幾頁
        this.pages = this.totolCount % this.pageSize == 0? this.pages: this.pages+1;
        this.createHomePage();
        this.createPrePage();
        var n = 1;
        while(n <= this.pages) {
          if(n > this.initMaxPage){
             break; //到達最大顯示數(shù)
          }
          var _span = document.createElement("SPAN");
          _span.style.cssText = "margin-left:10px";
          if(n == 1) { //初始化時第一頁為活動頁
            _span.innerText = n;
            this.currentActiveSpan = _span;
          }else{
             var _a = document.createElement("A");
             _a.href = "#";
            _a.onclick = this.reView;
            _a.innerText = n;
            _span.appendChild(_a);
          }
          this.pageDivObj.appendChild(_span);
          n++;
        }
        if(this.pages != 0) {
          this.currentMax = n - 1; //當前組最大頁碼 1 2 3 4 5值為5
          this.currentMin = 1; //當前最小頁碼 1 2 3 4 5 值為1
          this.homePage = 1; //首頁
          this.endPage = this.pages; //未頁
          this.currentPage = 1; //當前頁
        }
        //alert(this.currentMax);
        //alert(this.currentMin);
        this.createNextPage();
        this.createEndPage();
       
       
       
    };
    this.query = function() {
      var curPage = that.currentPage; //當前頁
      var pageSize = that.pageSize;
      if(that.callBack) that.callBack(curPage, pageSize);
          
    };
    this.reView = function() {
     //重新渲染UI
       that.reViewActivePage();
       that.query();
    };
    this.reViewActivePage = function() {
      //重新渲染當前頁視圖
      var actA = event.srcElement; //當前被點擊的 a對象
      var ap = actA.parentNode; //獲得當前a容器span對象
      //還原當前頁視圖
       var _a = document.createElement("A");
        _a.href = "#";
        _a.onclick = this.reView;
        _a.innerText = that.currentActiveSpan.innerText;
        that.currentActiveSpan.innerText = "";
        that.currentActiveSpan.appendChild(_a);
       //渲染新的當前頁視圖
       that.currentActiveSpan = ap; //切換當前活動頁容器
       var curPage = parseInt(actA.innerText);
       that.currentActiveSpan.removeChild(actA);
       that.currentActiveSpan.innerText = curPage;
       this.currentPage = curPage; //更改當前頁碼
       if(!that.toNextGroup()) that.toPreGroup();
    };
    this.toNextGroup = function() {
       //重新渲染顯示頁下一組 1 2 3 4 5 --> 5 6 7 8 9
       if(that.currentPage == that.currentMax) {//點擊的頁碼為當前組最大頁碼，當go 下一組
         if(that.currentPage != that.endPage) { //如果點了未頁當然不會再有下一組啦！
            that.pageDivObj.innerHTML = ""; //@1
            var pageCode = parseInt(that.currentPage) + 1; //顯示頁碼
            var n = 2; //當前活動頁不重創(chuàng)
            this.createHomePage();
            this.createPrePage();
            that.currentActiveSpan.innerText = that.currentPage;
            that.pageDivObj.appendChild(that.currentActiveSpan); //將當前活動頁回放,請看@1
            while(pageCode <= that.pages) {
            if(n > that.initMaxPage){
               break; //到達最大顯示數(shù)
            }
            var _span = document.createElement("SPAN");
            _span.style.cssText = "margin-left:10px";
            var _a = document.createElement("A");
             _a.href = "#";
            _a.onclick = that.reView;
            _a.innerText = pageCode;
            _span.appendChild(_a);
            that.pageDivObj.appendChild(_span);
            pageCode++;
            n++;
          }
          that.currentMax = pageCode - 1;
          that.currentMin = that.currentPage;
         // alert("currentMax: " + that.currentMax);
         // alert("currentMin: " + that.currentMin);
          this.createNextPage();
          that.createEndPage();
          return true;
         }//end if
       }//end if
       return false;
    };
    this.toPreGroup = function() { //
      //重新渲染顯示頁上一組 5 6 7 8 9 -->1 2 3 4 5
      if(that.currentPage == that.currentMin) { //點了組中最小頁碼
        if(that.currentPage != 1) {
           that.pageDivObj.innerHTML = ""; //@2
            var pageCode = parseInt(that.currentPage) - (that.initMaxPage -1); //顯示頁碼
            var n = 2; //當前活動頁不重創(chuàng)
            this.createHomePage();
            this.createPrePage();
            while(true) {
            if(n > that.initMaxPage){
               break; //到達最大顯示數(shù)
            }
            var _span = document.createElement("SPAN");
            _span.style.cssText = "margin-left:10px";
            var _a = document.createElement("A");
             _a.href = "#";
            _a.onclick = that.reView;
            _a.innerText = pageCode++;
            _span.appendChild(_a);
            that.pageDivObj.appendChild(_span);
            n++;
          }
          that.currentMax = that.currentPage;
          that.currentMin = pageCode - (that.initMaxPage -1);
          //alert("currentMax: " + that.currentMax);
         // alert("currentMin" + that.currentMin);
          that.currentActiveSpan.innerText = that.currentPage;
            that.pageDivObj.appendChild(that.currentActiveSpan); //將當前活動頁回放,請看@2
            that.createNextPage();
            that.createEndPage();
        }//end if
      }//end if
    };
     this.toHomePage = function(){
       //去到首頁
       if(that.pages == 0) return;
       if(that.currentPage != 1) {//切組
         that.pageDivObj.innerHTML = "";
         that.init();
       }//end if
       that.currentPage = 1;
       that.currentMin = 1;
       that.currentMax = that.initMaxPage;
       that.query();
     };
     this.toEndPage = function() {
       //去到未頁
        if(that.pages == 0 ||that.currentPage == that.pages) return;
        if(true) {//切組條件修改，此條件作廢,臨時設為true
        that.pageDivObj.innerHTML = "";
        that.createHomePage();
        that.createPrePage();
        var pageCode = 1;
     var n = 1;
      while(pageCode <= that.pages) {
        if(n > that.initMaxPage-1){
          n = 1;
        }
        n++;
        pageCode++;
      }
      
      pageCode = that.pages - (n-2);
      for(var j = 1; j < n; j++) {
         var _span = document.createElement("SPAN");
       _span.style.cssText = "margin-left:10px";
       if(pageCode == that.pages) { //初始化時第一頁為活動頁
        _span.innerText = pageCode;
        that.currentActiveSpan = _span;
       }else{
         var _a = document.createElement("A");
         _a.href = "#";
         _a.onclick = that.reView;
         _a.innerText = pageCode;
         _span.appendChild(_a);
         pageCode++;
       }
       that.pageDivObj.appendChild(_span);
      }
       
         that.createNextPage();
          that.createEndPage();
       }//end if
       that.currentPage = that.pages;
       that.currentMin = that.pages - (n-2);
       that.currentMax = that.pages;
      // alert("currentMin: " + that.currentMin);
       //alert("currentMax: " + that.currentMax);
      // alert("pages: " + that.pages);
       that.query();
     };
     
     this.next = function() {
       //下一頁
     };
     this.pre = function() {
       //上一頁
     };
     this.update = function(count) {
       //更新分頁系統(tǒng)
       this.totolCount = count;
       that.pageDivObj.innerHTML = "";
       this.init();
     }; 
     this.createPrePage = function() {
       return;
       var _span = document.createElement("SPAN");
       _span.style.cssText = "margin-left:16px";
       var _a = document.createElement("A");
       _a.href = "#";
       _a.onclick = this.pre;
       _a.innerText = "上一頁";
       _span.appendChild(_a);
       this.pageDivObj.appendChild(_span);
     };
     this.createNextPage = function() {
       return;
       var _span = document.createElement("SPAN");
       _span.style.cssText = "margin-left:16px";
       var _a = document.createElement("A");
       _a.href = "#";
       _a.onclick = this.next;
       _a.innerText = "下一頁";
       _span.appendChild(_a);
       this.pageDivObj.appendChild(_span);
     };
     this.createHomePage = function() {
       var homeSpan = document.createElement("SPAN");
       var _a = document.createElement("A");
       _a.href = "#";
       _a.onclick = this.toHomePage;
       _a.innerText = "首頁";
       homeSpan.appendChild(_a);
       this.pageDivObj.appendChild(homeSpan);
     };
     this.createEndPage = function() {
       var _span = document.createElement("SPAN");
       _span.style.cssText = "margin-left:16px";
       var _a = document.createElement("A");
       _a.href = "#";
       _a.onclick = this.toEndPage;
       _a.innerText = "未頁(" + this.pages +")";
       _span.appendChild(_a);
       this.pageDivObj.appendChild(_span);
     }
   }


html
<html>
<head>
 <script src="pageSystem.js"></script>
 <script>
   var psys;
   window.onload = function() {
    psys = new PageSystem(1120, "pageDiv", 10, showMsg); //總記錄數(shù), 分頁系統(tǒng)容器，每組10頁,回調(diào)
    psys.init();
  }
  
  function showMsg(currentPage, pageSize) {
    //回調(diào)方法自定義，兩個參數(shù)，第一個為當前頁，第二個為每頁記錄數(shù)
    /****************將currentPage和pageSize請求數(shù)據(jù)更新列表,最好使用ajax技術(shù)******************/
    alert("請求數(shù)據(jù)要的相應參數(shù)>> currentPage: "+ currentPage + " pageSize: " + pageSize);
  }
   
   /*****如果要更新分頁系統(tǒng)請如下操作******/
    //psys.update(count); //@count 為記錄總數(shù)
    function updatePageSys() {
     
     psys.update(150); //@count 為記錄總數(shù)
   }
  </script>
  <style>
    #pageDiv{
      font-size:13px;
    }
  </style>
</head>
<body>
  <div id="pageDiv">
  </div>
  <br/><br/>
  <a href="#" onclick="updatePageSys();"/>更新分頁系統(tǒng)</a>
</body>
</html>