码迷,mamicode.com
首页 > Web开发 > 详细

JS 分页

时间:2020-04-11 23:54:37      阅读:82      评论:0      收藏:0      [点我收藏+]

标签:amp   row   class   rgba   back   inner   str   font   ref   

/**
* 分页函数
* 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 分页

JS 分页

标签:amp   row   class   rgba   back   inner   str   font   ref   

原文地址:https://www.cnblogs.com/baimeishaoxia/p/12682706.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!