纯JS实现简单的分页功能

最新推荐文章于 2024-05-11 14:22:31 发布

一只鱼啊

最新推荐文章于 2024-05-11 14:22:31 发布

阅读量602

点赞数 1

分类专栏：学习笔记文章标签： javascript 函数分页数据

本文链接：https://blog.csdn.net/qq_25731587/article/details/78258847

版权

学习笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

纯JavaScript实现简单的分页功能：

/**
     * 分页函数
     * pno--页数
     * psize--每页显示记录数
     * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
     * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
     **/

     //设置body的onLoad属性，设置当前页数和每页显示的总数据。如：<body onLoad="goPage(1,5);"></body>

    function goPage(pno, psize) {
        //获取id为"idData"的table标签
        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 = currentPage * pageSize;//结束显示的行   
        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=\"all/#\" onClick=\"goPage(" + (1) + "," + psize
                    + ")\">首页</a>";
            tempStr += "<a href=\"all/#\" onClick=\"goPage(" + (currentPage - 1)
                    + "," + psize + ")\"><上一页</a>"
        } else {
            tempStr += "首页";
            tempStr += "<上一页";
        }

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

        //创建ID为barcon的div，用于显示分页链接
        document.getElementById("barcon").innerHTML = tempStr;

    }

接下来，只需创建table，设置ID为”idData”，然后传入数据。
之后再创建ID为”idData”的table，导入分页信息即可。

<!--设置当前页数和每页显示的数据数量-->
<body onLoad(goPage(1,5);)>
<table id="idData">
    <tr>
        <th>name</th>
        <th>email</th>
        <th>sex</th>
    </tr>
    <tr>
        <td>jax</td>
        <td>jax@163.com</td>
        <td>male</td>
    </tr>
    <!-- 数据省略-->
</table>

<table id="idData">
    <tr>
    <!-- 内嵌id为"barcon"的div，用于显示分页标签-->
        <td><div id="barcon" name="barcon"></div></td>
    </tr>
</table>
</body>

emmmmmm.就这样可以了。

一只鱼啊

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
纯JS实现简单的分页功能

纯JavaScript实现简单的分页功能：/** * 分页函数 * pno--页数 * psize--每页显示记录数 * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数 * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能 **/ //设置body的onLoad属性，设置当前页数和每页显示的总数据。
复制链接

扫一扫