分页

分享一下原生js分页思路

注释和分析我已经写的狠清楚了

测试数据这一块的话自己可以添加注意最下一行的主函数控制分页第几页每页几行

上代码

//html:
    <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>
        <tr>
            <td>测试编号4</td>
            <td>25</td>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
        <tr>
            <td>测试编号5</td>
            <td>25</td>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
        <tr>
            <td>测试编号6</td>
            <td>25</td>
            <td>单元格2</td>
            <td>单元格2</td>
        </tr>
        <tr>
            <td>测试编号7</td>
            <td>25</td>
            <td>单元格1</td>
            <td>单元格2</td>
        </tr>
   <div id="nav"></div>
    </table>

　下面是js的代码

 

<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(2, 3); // 这里控制显示第几页和每页一共有几行这里显示第2页每页3行。
        }
    </script>

　　这里样式没有怎么写只是实现了功能如果想添加样式就动态添加行内样式就行了