JS 分页

Posted 2021-03-01 baimeishaoxia

/**
* 分页函数
* pno--页数
* psize--每页显示记录数
* 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
* 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
**/

function goPage(pno,psize,strvar){

    var itable = document.getElementById("tableId");    
    var num = itable.rows.length;//表格行数 
    var totalPage = 0;//总页数
    var pageSize = psize;//每页显示行数
    if((num-1)/pageSize > parseInt((num-1)/pageSize)){ 

        totalPage=parseInt((num-1)/pageSize)+1; 
    }else{ 
        totalPage=parseInt((num-1)/pageSize);
    }   

    var currentPage = pno;//当前页数

    var startRow = (currentPage - 1) * pageSize+1;//开始显示的行   

   var endRow = currentPage * pageSize+1;//结束显示的行   

   endRow = (endRow > num)? num : endRow;
    //前n行始终显示

    for(i=0;i<1;i++){
        var irow = itable.rows[i];
        irow.style.display = "";
    }
    for(var i=1;i<num;i++){
        var irow = itable.rows[i];
        if(i>=startRow&&i<endRow){
            irow.style.display = "";

        }else{
            irow.style.display = "none";
        }
    }

var tempStr  = "

<ul class=‘pagination pull-left‘><li><a>共"+(num-1)+"条记录 </a></li><li><a>共"+totalPage+"页 </a></li><li><a>当前第"+currentPage+"页</a></li></ul>

";
    tempStr += "

<ul class=‘pagination pull-right‘>";

if(currentPage>1){
    tempStr += "<li><a href="#" onClick="goPage("+(currentPage-1)+","+psize+",‘"+strvar+"‘)">上一页</a></li>"

}else{
    tempStr += "<li><a>上一页</a></li>";   
}

if(currentPage<totalPage){

    tempStr += "<li><a href="#" onClick="goPage("+(currentPage+1)+","+psize+",‘"+strvar+"‘)">下一页</a></li>";

}else{
    tempStr += "<li><a>下一页</a></li>";

}
if(currentPage>1){
    tempStr += "<li><a href="#" onClick="goPage("+(1)+","+psize+",‘"+strvar+"‘)">首页</a></li>";
}else{
    tempStr += "<li><a >首页</a></li>";
}
if(currentPage<totalPage){
    tempStr += "<li><a href="#" onClick="goPage("+(totalPage)+","+psize+",‘"+strvar+"‘)">尾页</a></li>";
}else{
    tempStr += "<li><a >尾页</a></li>";
}
tempStr +="</ul>

";
    document.getElementById(strvar+"_pageStr").innerhtml = tempStr;
}

本文转载于:JS 分页