JavaScript - 分頁

JavaScript - 分頁

前言:
    參考資料的作者分享的 以Javascript方式，撰寫出分頁功能。

    經研究後，覺得相當好理解。因此整理於此，紀錄一下。  


參考資料: 

非常不錯的一個JS分頁效果代碼，值得研究

- 分頁樣式 -

css 代碼

  
      #setpage a:link,#setpage a:visited,#setpage a:hover,.current,#info{ 
        border:1px solid #DDD; 
        background:#F2F2F2; 
        display:inline-block; 
        margin:1px; 
        text-decoration:none; 
        font-size:15px; 
        width:width:auto; 
        height:width:auto; 
        text-align:center; 
        line-height:15px; 
        color:#AAA; 
        padding:1px 2px; 
      } 

      .current{ 
        border:1px solid #83E7E4; 
        background:#DFF9F8; 
        margin:1px; 
        color:#27CBC7; 
      } 
      #info{ 
        width:auto; 
      } 

html 代碼

  
    <div id="setpage"></div> 

js 代碼

       
    //分頁
    var totalpage = 25 ;        //查詢資料總筆數(假設有25筆資料)
    var pagesize = 5 ;                 //頁數區塊呈現頁數數量(一次5頁)
    var cpage = 1;          //當前頁數，預設初始為 1 
    var count;              // 
    var outstr = "";                   //pagesize 的頁數串聯 by HTML，再置入指定 class
    setpage();                         //組合分頁的function，放在產生分頁的情況下
  
    function gotopage(target){     
      cpage = target;                //把頁面計數定位到第幾頁 
      setpage();       
    } 
 
    function setpage()  { 
      if(totalpage<=pagesize){        //總頁數小於 pagesize
        for (count=1;count<=totalpage;count++) {
         if(count!=cpage){ 
            outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>"; 
   }else{ 
     outstr = outstr + "<span class='current' >"+count+"</span>"; 
   } 
 } 
     } 
      
     if(totalpage>pagesize){        //總頁數大於 pagesize
        if(parseInt((cpage-1)/pagesize) == 0) {             
          for (count=1;count<=pagesize;count++) {           if(count!=cpage){ 
       outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>"; 
     }else{ 
       outstr = outstr + "<span class='current'>"+count+"</span>"; 
     } 
   } 
   outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+") '> 下頁 </a>";   //下頁
        }       
        else if(parseInt((cpage-1)/pagesize) == parseInt(totalpage/pagesize)) {     
          outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+(parseInt((cpage-1)/pagesize)*pagesize)+")'> 上頁 </a>";  //上頁
   for (count=parseInt(totalpage/pagesize)*pagesize+1;count<=totalpage;count++) {               if(count!=cpage){ 
       outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>"; 
     }else{ 
       outstr = outstr + "<span class='current'>"+count+"</span>"; 
     } 
   } 
 } 
 else{     
   outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+(parseInt((cpage-1)/pagesize)*pagesize)+")'> 上頁 </a>";    //上頁
   for (count=parseInt((cpage-1)/pagesize)*pagesize+1;count<=parseInt((cpage-1)/pagesize)*pagesize+pagesize;count++){         
     if(count!=cpage) { 
       outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'>"+count+"</a>"; 
     }else{ 
       outstr = outstr + "<span class='current'>"+count+"</span>"; 
     } 
   } 
   outstr = outstr + "<a href='javascript:void(0)' onclick='gotopage("+count+")'> 下頁  </a>";   //下頁
 } 
      }     
      document.getElementById("setpage").innerHTML = outstr　; 

      outstr = ""; 
    } 

卒仔〞筆記 :  每點擊一次分頁數字，都會重新組合一次分頁條。 
                    影響區塊僅於"分頁條"， 資料撈取可於 查找 「cpage 」當前頁數~
                    在額外進行資料撈取~ 

p.s : 以openData來舉例:
   var pageListNum = 10;  //每頁資料為10筆
   var pageSkipNum ;         //跳過筆數
   cpage =  4                       //當前頁數
 
  公式 : pageSkipNum = (cpage - 1) *  pageListNum;

  結論 : 當第四頁時，跳過30筆從31筆開始撈取，在撈取10筆~