posts - 7, 
comments - 58, 
trackbacks - 0


          
	

          

          
	
					


          
	
	1、測(cè)試頁(yè)面
          
<html>
          
<head>
          
 <script src="pageSystem.js"></script>
          
 <script>
          
   var psys;
          
   window.onload = function() {
          
    psys = new PageSystem(1120, "pageDiv", 10, showMsg); //總記錄數(shù), 分頁(yè)系統(tǒng)容器，每組10頁(yè),回調(diào)
          
    psys.init();
          
  }
          
  
          
  function showMsg(currentPage, pageSize) {
          
    //回調(diào)方法自定義，兩個(gè)參數(shù)，第一個(gè)為當(dāng)前頁(yè)，第二個(gè)為每頁(yè)記錄數(shù)
          
    /****************將currentPage和pageSize請(qǐng)求數(shù)據(jù)更新列表,最好使用ajax技術(shù)******************/
          
    alert("請(qǐng)求數(shù)據(jù)要的相應(yīng)參數(shù)>> currentPage: "+ currentPage + " pageSize: " + pageSize);
          
  }
          
   
          
   /*****如果要更新分頁(yè)系統(tǒng)請(qǐ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();"/>更新分頁(yè)系統(tǒng)</a>
          
</body>
          
</html>
          

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

          
3、效果圖
          
 
          
如需轉(zhuǎn)載，請(qǐng)注明原文出處！謝謝合作。

	
          posted on 2008-05-04 22:54 Sonny Li 閱讀(3779) 評(píng)論(23)  編輯  收藏  所屬分類: javascript編程語(yǔ)言 
          

          







          
	    
    


          
FeedBack:

          
	

		
          
			
          # re: 用javascript實(shí)現(xiàn)較為通用的客戶端分頁(yè)組件
          
			
          
				2008-05-05 00:59 | 令狐蟲
          
				
          不錯(cuò)

          我收藏了！  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          # re: 用javascript實(shí)現(xiàn)較為通用的客戶端分頁(yè)組件
          
			
          
				2008-05-05 09:44 | J@mes
          
				
			
          
			
			
		
          
	
		
          
			
          # re: 用javascript實(shí)現(xiàn)較為通用的客戶端分頁(yè)組件
          
			
          
				2008-05-05 09:46 | BeanSoft
          
				
          贊一個(gè)。  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          # re: 用javascript實(shí)現(xiàn)較為通用的客戶端分頁(yè)組件
          
			
          
				2008-05-05 09:55 | icecity
          
				
          是“末頁(yè)”，不是“未頁(yè)”:)  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          # re: 用javascript實(shí)現(xiàn)較為通用的客戶端分頁(yè)組件
          
			
          
				2008-05-05 10:40 | 王戰(zhàn)鋒
          
				
          我覺得非常棒！感謝你的分享！  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          # re: 用javascript實(shí)現(xiàn)較為通用的客戶端分頁(yè)組件
          
			
          
				2008-05-05 11:25 | tttom
          
				
          能不能改成上一頁(yè)，下一頁(yè)那種？？謝謝了！！  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          # re: 用javascript實(shí)現(xiàn)較為通用的客戶端分頁(yè)組件
          
			
          
				2008-05-05 11:57 | tttom
          
				
          博主，麻煩您給改改！謝謝了！  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          # re: 用javascript實(shí)現(xiàn)較為通用的客戶端分頁(yè)組件
          
			
          
				2008-05-05 12:00 | tttom
          
				
          剛看了博主的照片，哇，還是一個(gè)大帥哥哦！

            回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          # re: 用javascript實(shí)現(xiàn)較為通用的客戶端分頁(yè)組件
          
			
          
				2008-05-05 15:17 | Happy漫步者
          
				
          看的出這個(gè)javascript水平還不賴 學(xué)習(xí)了~~ 頂個(gè)

            回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          # re: 用javascript實(shí)現(xiàn)較為通用的客戶端分頁(yè)組件
          
			
          
				2008-05-05 20:43 | 無(wú)羽蒼鷹
          
				
          @tttom

          由于工作需要，此分頁(yè)組件是臨時(shí)做的測(cè)試版（沒時(shí)間弄，最近天天加班，等稍有空后將與改進(jìn)）

          謝謝。  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          # re: 用javascript實(shí)現(xiàn)較為通用的客戶端分頁(yè)組件
          
			
          
				2008-05-05 20:45 | 無(wú)羽蒼鷹
          
				
          @icecity

          呵呵。。。謝謝。。。^_^  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          # re: 用javascript實(shí)現(xiàn)較為通用的客戶端分頁(yè)組件
          
			
          
				2008-05-05 22:00 | jacky-q
          
				
          firefox下無(wú)法顯示....唔,有空看看改改.
          寫得還是很不錯(cuò)的.  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          # re: 用javascript實(shí)現(xiàn)較為通用的客戶端分頁(yè)組件[未登錄]
          
			
          
				2008-05-06 14:23 | Paul Lin
          
				
          雖然我看不懂，不過(guò)還是要頂你一下，呵呵  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          # re: 用javascript實(shí)現(xiàn)較為通用的客戶端分頁(yè)組件
          
			
          
				2008-05-06 20:12 | 速溶人生
          
				
          頂一個(gè)，最近在看這個(gè)！  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          # re: 用javascript實(shí)現(xiàn)較為通用的客戶端分頁(yè)組件
          
			
          
				2008-05-08 20:40 | 王能
          
				
          看不懂,還要頂

          http://www.tondou.cn/ 最新電影網(wǎng)  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          # re: 用javascript實(shí)現(xiàn)較為通用的客戶端分頁(yè)組件
          
			
          
				2008-05-09 22:32 | 超
          
				
          我前公司的牛人。。哈哈。。頂。。  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          # re: 用javascript實(shí)現(xiàn)較為通用的客戶端分頁(yè)組件
          
			
          
				2008-05-12 23:26 | wen
          
				
          看不懂,也頂一下,是個(gè)好東西!!拿用用!!  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          # re: 用javascript實(shí)現(xiàn)較為通用的客戶端分頁(yè)組件
          
			
          
				2008-05-28 14:19 | 懶人
          
				
          很不錯(cuò)的東西  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          # re: 用javascript實(shí)現(xiàn)較為通用的客戶端分頁(yè)組件
          
			
          
				2008-07-30 11:38 | 杜東輝
          
				
          杜東輝，到此一游，看不懂，老大,頂  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          # re: 用javascript實(shí)現(xiàn)較為通用的客戶端分頁(yè)組件
          
			
          
				2008-12-06 09:15 | 海！
          
				
          希望樓主能改用jquery 把它寫成一個(gè)組件，讓后共享，大家就知道你的杰作了  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          # re: 用javascript實(shí)現(xiàn)較為通用的客戶端分頁(yè)組件
          
			
          
				2009-02-16 12:07 | eva
          
				
          無(wú)法運(yùn)行啊！  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          # 有個(gè)最新版的代碼，分享給大家，也是幾年前寫的東西了
          
			
          
				2011-11-15 00:57 | Sonny Li
          
				
           function $el(el) {
               return document.createElement(el);
            }
            function $ap(p, n) {
              p = p || document;
              p.appendChild(n);
            }
            function $id(_id) {
              return document.getElementById(_id);
            }
            (function(){
               var _style = $el("link");
               _style.href = "jpage.css";
               _style.rel = "stylesheet";
              _style.type = "text/css";
               document.getElementsByTagName("HEAD").item(0).appendChild(_style); 
             
            })();
            
           /**
            * fun: 實(shí)現(xiàn)ajax分頁(yè)效果
            * 參數(shù)說(shuō)明：c 分頁(yè)控件顯示的容器ID，一般用DIV的ID
            * recordCount: 總記錄數(shù)
            * service 請(qǐng)求分頁(yè)數(shù)據(jù)的js方法指針，分頁(yè)控件負(fù)責(zé)回調(diào), 原型 function fun(curPage, pageSize) {....}
            */
           function JPage(c, recordCount, service, pageSize, group) {
           	 this._c = $id(c);
             this.pageSize = pageSize || 10; //一頁(yè)幾條
             this.pageCount = (recordCount % this.pageSize) == 0? (recordCount / this.pageSize): parseInt((recordCount / this.pageSize) + 1); //總頁(yè)數(shù)
           	 this.service = service; //回調(diào)方法
           	 this.group = group || 11; //一組幾頁(yè)
           	 this.pageData = new Array(this.group); //當(dāng)前要顯示的頁(yè)對(duì)象索引緩存區(qū)
           	 this.curPage = 1; // 初始化為第一頁(yè)為當(dāng)前頁(yè)
           	 var that = this;
           	 this.pageEvt = function(thePg) {
           	 	 this.curPage = thePg;
           	 	 this.service(this.curPage, this.pageSize);
           	 	 this.render();
           	 };
           	 this.render = function() {
             	  this._c.innerHTML = "";
             	  if(recordCount == 0) return;
             	  this.createFirstPage();
             	  this.readData(); //準(zhǔn)備分頁(yè)索引
             	  this.createPrePage();
             	  this.createPages();
             	  this.createNextPage();
             	  this.createEndPage();
             };
             this.createEndPage = function() {
                var _span = $el("span");
             	  var epg = new FEPg(this, this.pageCount, "EndCssClass"); //最后一頁(yè)
             	  $ap(_span, epg.getView());
             	  $ap(this._c, _span);
             };
             this.createFirstPage = function() {
                var _span = $el("span");
             	  var fpg = new FEPg(this, 1, "FirstCssClass"); //首頁(yè)
             	  $ap(_span, fpg.getView());
             	  $ap(this._c, _span);
             };
             this.createPages = function() {
             	  for(var n = 0; n < this.group; n++) {
             	  	 if(this.pageData[n] == -2) break; //
             	  	 var _span = $el("span");
             	  	 var _page = new Pg(this, this.pageData[n]);
             	  	 $ap(_span, _page.getView());
             	     $ap(this._c, _span);
             	  }
             };
             this.createPrePage = function() {
             	  var preSpan = $el("span");
             	  var prePage = new PrePg(this, this.curPage - 1);
             	  $ap(preSpan, prePage.getView());
             	  $ap(this._c, preSpan);
             };
             this.createNextPage = function() {
             	  var nextSpan = $el("span");
             	  var nextPage = new NextPg(this, this.curPage + 1);
             	  $ap(nextSpan, nextPage.getView());
             	  $ap(this._c, nextSpan);
             };
             this.readData = function() {
             	  for(var i = 0; i < this.group; i++) this.pageData[i] = -2;
             	  var firstIndex = (this.pageCount <= this.group || this.curPage <= parseInt(this.group / 2))? 1: this.curPage - parseInt(this.group / 2);
             	  if(firstIndex > this.pageCount) return;
             	  this.pageData[0] = firstIndex;
             	  for(var n = 1; n < this.group; n++) {
             	    if(this.pageData[n-1] >= this.pageCount) break;
             	    this.pageData[n] = this.pageData[n-1] + 1;
             	  }
             };
             this.render();
           }
           
           /**
            * fun: 頁(yè)模型基類
            * 參數(shù)說(shuō)明：owner分頁(yè)對(duì)象，the 當(dāng)前頁(yè)索引， pre 上一頁(yè)索引， _next 下一頁(yè)索引， vtxt 顯示文本（用于“上一頁(yè)”及“下一頁(yè)”）
            */
           function Pg(owner, the, vtxt) {
           	 this._owner = owner;
           	 this._self = the;
           	 this._vtxt = vtxt || the;
           	 this._view = $el("a");
           	 this._view.innerHTML = this._vtxt;
           	 var that = this;
           	 this.getView = function() {
           	 	 if(this._self == this._owner.curPage) {this._view.className = "activePage"; return this._view; }
           	 	 this._view.href = "javascript:;";
           	 	 this._view.onclick = function() {
           	 		  that._owner.pageEvt(that._self); //回傳點(diǎn)中的頁(yè)對(duì)象頁(yè)索引
           	 	 }
           	 	 return this._view;
           	 };
           	 
           	 this.getMe = function() {
           	   return this._self;
           	 };
           	
           }
           
           /**
            * fun: Pg子類"上一頁(yè)“類模型
            */
           function PrePg(owner, the, vtxt) {
             this._super = Pg;
             this._super(owner, the, " "); //當(dāng)前頁(yè)為第一頁(yè)時(shí)，the為0
             var that = this;
             
             this.getView = function() {
           	 	 if(this._self == 0) { this._view.className = "NoView"; return this._view; } //如果當(dāng)前頁(yè)為第一頁(yè)，不創(chuàng)建上一頁(yè)對(duì)象視圖
           	 	 this._view.href = "javascript:;";
           	 	 this._view.onclick = function() {
           	 		  that._owner.pageEvt(that._self); //回傳點(diǎn)中的頁(yè)對(duì)象頁(yè)索引
           	 	 }
          	 this._view.className = "PreCssClass";
           	 	 return this._view;
           	 };
           	 
           }
           
           /**
            * fun: Pg子類"下一頁(yè)”類模型
            */
            function NextPg(owner, the, vtxt) {
             this._super = Pg;
             this._super(owner, the, " ");
             var that = this;
             
             this.getView = function() {
           	 	 if(this._self == this._owner.pageCount + 1) { this._view.className = "NoView"; return this._view; } //如果當(dāng)前頁(yè)為第一頁(yè)，不創(chuàng)建上一頁(yè)對(duì)象視圖
           	 	 this._view.href = "javascript:;";
           	 	 this._view.onclick = function() {
           	 		  that._owner.pageEvt(that._self); //回傳點(diǎn)中的頁(yè)對(duì)象頁(yè)索引
           	 	 }
          	   this._view.className = "NextCssClass";
           	 	 return this._view;
           	 };
            }
            
            /**
             * fun: 第一頁(yè)及最后一頁(yè)類模型
             */ 
             function FEPg(owner, the, _class) {
               this._super = Pg;
               this._super(owner, the, " ");
               var that = this;
               this.getView = function() {
             	 	 if(this._owner.pageCount == 0) { return this._view; } //如果當(dāng)前頁(yè)為第一頁(yè)，不創(chuàng)建上一頁(yè)對(duì)象視圖
             	 	 this._view.href = "javascript:;";
             	 	 this._view.onclick = function() {
           	 	 		  that._owner.pageEvt(that._self); //回傳點(diǎn)中的頁(yè)對(duì)象頁(yè)索引
             	 	 }
          		   this._view.className = _class;
             	 	 return this._view;
              }
            }  回復(fù)  更多評(píng)論
            
          
			
          
			
			
		
          
	
		
          
			
          # re: 用javascript實(shí)現(xiàn)較為通用的客戶端分頁(yè)組件
          
			
			
			
		
          
	








          








          

				
	



          


          
	
		
          
			
          
	
          
		
          <2014年12月>
          
	
          日一二三四五六
          30123456
          78910111213
          14151617181920
          21222324252627
          28293031123
          45678910
          

          

          
			
			

          常用鏈接
          


          留言簿(3)
          




		
          隨筆分類
          
		
				
			
	
		
          隨筆檔案
          
		
				
			
	
		
          文章分類
          
		
				
			
	
		
          相冊(cè)
          
		
				
			
	
		
          收藏夾
          
		
				
			
	
		
          博客好友
          
		
				
			
	




          搜索
          

            
	
          • 
		
          •  
	
            • 

          


          最新評(píng)論
	
          

          
	
			
		

          


          閱讀排行榜
          



          評(píng)論排行榜
          


          
	

          


          


          

    







          
        
	




主站蜘蛛池模板：
依安县|
新河县|
确山县|
碌曲县|
平罗县|
合肥市|
南开区|
疏附县|
邓州市|
手游|
任丘市|
马鞍山市|
南澳县|
城口县|
确山县|
禹州市|
鹰潭市|
泰宁县|
绩溪县|
余姚市|
家居|
永昌县|
西华县|
呼和浩特市|
长宁区|
太谷县|
兴义市|
缙云县|
土默特左旗|
尚志市|
阿城市|
玛多县|
兖州市|
武邑县|
雷州市|
临湘市|
桐梓县|
新龙县|
噶尔县|
安多县|
临夏市|