純js實現分頁

/**
*分頁函數
*pno--頁數
*psize--每頁顯示記錄數
*分頁部分是從真實數據行開始,於是存在加減某個常數,以肯定正真的記錄數
*純js分頁實質是數據行所有加載,經過是否顯示屬性完成分頁功能
**/
function goPage(pno,psize){
    var itable = document.getElementById("idData");
    var num = itable.rows.length;//表格全部行數(全部記錄數)
    console.log(num);
    var totalPage = 0;//總頁數
    var pageSize = psize;//每頁顯示行數
    
    //總共分幾頁
    if(num/pageSize>parseInt(num/pageSize)){
             totalPage = parseInt(num/pageSize) + 1;
    }else{
             totalPage = parseInt(num/pageSize);
    }

     var currentPage = pno;//當前頁數
     var startRow = (currentPage - 1)*pageSize+1;//開始顯示的行
     var endRow = (endRow > num) ? num:endRow;
     console.log(endRow);

     //遍歷顯示數據實現分頁
     for (var i=1;i<(num+1);i++){
           var irow = itable.rows[i-1];
            if(i>=startRow && i<=endRow) {
                 irow.style.display = "block";
           }else{
                 irow.style.display = none";
           }
    }

    var pageEnd = document.getElementById("pageEnd");
    var tempStr = "共"+num+"條記錄 分"+totalPage+"頁 當前第"+currentPage+"頁";

      if(currentPage>1){
          tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首頁</a>";
           tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一頁</a>"

      }else{
             tempStr +="首頁";
             tempStr +="<上一頁";
      }
      
       if(currentPage<totalPage){
              tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一頁></a>";
              tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾頁</a>";

        }else {
               tempStr += "下一頁>";
               tempStr += "尾頁";
         }

    document.getElementById("barcon").innerHTML = tempStr;

}
     
相關文章
相關標籤/搜索