1. 程式人生 > >一種前端分頁的方法

一種前端分頁的方法

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;//開始顯示的行  31 
        var endRow = currentPage * pageSize;//結束顯示的行   40
        endRow = (endRow > num)? num : endRow;    40
        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;    
 }
</script>