JS实现分页功能

刚刚遇到的需求 js实现分页功能 话不多说 代码见。


    <script>
        /**
         * 分页函数
         * 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;//开始显示的行 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 tempStr = '';
            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 + ")\">下一
  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值