JS按表格行数分页

最新推荐文章于 2021-09-30 09:33:16 发布

Inuyasha1121

最新推荐文章于 2021-09-30 09:33:16 发布

阅读量2.9k

点赞数

分类专栏：分页小功能文章标签： js function

本文链接：https://blog.csdn.net/Inuyasha1121/article/details/41865527

版权

小功能同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

分页

1 篇文章 0 订阅

订阅专栏

function goPage(pno,psize){


    var itable = document.getElementById("idData");
    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;


    //表头始终显示
    for(i=0;i<1;i++){
        var irow = itable.rows[i];
        irow.style.display = "block";
    }
    
    //根据当前页数计算出的开始行、结束行 显示表格行
    for(var i=1;i<num;i++){
        var irow = itable.rows[i];
        if(i>=startRow&&i<endRow){
            irow.style.display = "block";
        }else{
            irow.style.display = "none";
        }
    }


    var tempStr = "共"+(num-1)+"条记录 分"+totalPage+"页 当前第"+currentPage+"页 ";


    if(currentPage>1){
        tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\">上一页</a>"
    }else{
        tempStr += "上一页 ";<span style="white-space:pre">	</span>
    }


    if(currentPage<totalPage){
        tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage+1)+","+psize+")\">下一页</a>";
    }else{
        tempStr += "下一页 ";<span style="white-space:pre">	</span>
    }


    if(currentPage>1){
        tempStr += "<a href=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>";
    }else{
        tempStr += "首页 ";
    }


    if(currentPage<totalPage){
        tempStr += "<a href=\"#\" onClick=\"goPage("+(totalPage)+","+psize+")\">尾页</a>";
    }else{
        tempStr += "尾页 ";
    }


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

html中使用：

<html>
<head>
<script type="text/javascript">
$(function () { 
    goPage(1,10);//每页十行
}
</script>
</head>
<body>

<!--数据表格-->
<table id="idData">
  <thead>
   ……
  </thead>
  <tbody>
   ……
  </tbody> 
</table>

<!--分页行-->
<table>
  <tr>
    <td>
      <div id="barcon" name="barcon"></div>
    </td>
  </tr>
</table>

</body>
</html>

Inuyasha1121

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS按表格行数分页

function goPage(pno,psize){var itable = document.getElementById("idData");var num = itable.rows.length;//表格行数var totalPage = 0;//总页数var pageSize = psize;//每页显示行数if((num-1)/pageSize > parseIn
复制链接

扫一扫