纯js实现分页

最新推荐文章于 2024-07-01 11:34:43 发布

会做饭的技术男

最新推荐文章于 2024-07-01 11:34:43 发布

阅读量277

点赞数

分类专栏：前端

原文链接：https://www.mk2048.com/blog/blog.php?id=h1kj0cjab0ab&title=%E7%BA%AFjs%E5%AE%9E%E7%8E%B0%E5%88%86%E9%A1%B5

版权

前端专栏收录该内容

2507 篇文章 12 订阅

订阅专栏

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

}