原始js分页

<!DOCTYPE html>
<html lang="en">

 

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    #Data {
        border: 1px solid #000;
        text-align: center;
        margin: 50px auto;
    }
    
    #nav {
        position: absolute;
        top: 50%;
        left: 10%;
    }
    
    a {
        display: inline-block;
        height: 34px;
        padding: 0 18px;
        border: 1px solid #e1e2e3;
        margin: 10px;
        text-align: center;
        line-height: 34px;
        text-decoration: none;
        color: #000;
    }
    
    #nav {}
    
    a:hover {
        color: aqua;
    }
</style>

 

<body>
    <table id="Data" width="70%">
        <tr>
            <td>测试编号1</td>
            <td>25</td>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
        <tr>
            <td>测试编号2</td>
            <td>25</td>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
        <tr>
            <td>测试编号3</td>
            <td>25</td>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
// 此处省略100个测试编号
        <div id="nav"></div>
    </table>
    <script>
        //分页函数，里又两个参数一个为当前页数，和每页行数
        function fun(a, b) {
            //获取数据
            var Data = document.getElementById("Data");
            //将数据里总行数都存在一个变量num中；
            var num = Data.rows.length; //共有48行
            //总页数
            //先给一个占位符
            var num1 = null;
            //总共分多少页
            // 这里判断出一共的页数并存在num1里
            //通过48的行数除以想要输出的行数有些行数是除不尽的就好比如48除以5等于9.6
            //所以要想个办法吧9.6取为一个整数9；
            // 在判断如果9.6比9大的话9+1 存入总页数里
            // 如果相等就是除尽了成了整数就不用+1直接存入

 

            if (num / b > parseInt(num / b)) {
                num1 = parseInt(num / b) + 1;
            } else {
                num1 = parseInt(num / b);
            }
            // 这里输出看看
            console.log("总页数" + num1);
            console.log("当前页数" + a);
            //这里有一个算法
            //每页开始显示的行数
            //这里当前页数a假如它是4 4-1=3 3*我想要显示的行数6 3*6=18；
            var tou = (a - 1) * b + 1; //开头显示19
            //每页结尾显示的行数
            var tail = a * b; //结尾显示24
            //便利数据操作显示
            //便利这个数据下标从o开始在将所有的数据存入data变量中;
            //在循环判断找到i值大于或者=开始显示行数 和 i<=结尾显示行数的i值的话就显示
            //否则隐藏;
            for (var i = 1; i <= num; i++) {
                var data = Data.rows[i - 1];
                if (i >= tou && i <= tail) {
                    data.style.display = "block";
                } else {
                    data.style.display = "none";
                }
            }

 

            //创建分页块
            //先创建一个变量设为空；
            // 在if判断动态添加标签上一页如果a大于1的话点击上一页传入的参数就是a-1返回a的上一次下标
            var pan = "";
            if (a > 1) {
                pan += "<a href=\"#\" onclick=\"fun(" + (a - 1) + "," + b + ")\">上一页</a>";
            }
            for (var i = 1; i <= num1; i++) {
                pan += "<a href=\"#\" onclick=\"fun(" + (i) + "," + b + ")\">" + i + "</a>";
            }
            if (a < num1) {
                pan += "<a href=\"#\" onclick=\"fun(" + (a + 1) + "," + b + ")\">下一页</a>";
            }

 

            //添加到页面中
            document.getElementById("nav").innerHTML = pan;
        };

 

        window.onload = function() {
//输入想要的显示的页数和每页一共显示多少行
            fun(5, 7);
        }
    </script>
</body>

 

</html>
posted @ 2019-12-27 11:12  石舟丿  阅读(164)  评论(0)    收藏  举报