原生js实现数据分页展示

最新推荐文章于 2022-08-19 17:37:08 发布
最新推荐文章于 2022-08-19 17:37:08 发布
阅读量524 收藏 5
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/sslcsq/article/details/109967371
版权

直接贴码~

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./index.css">
</head>

<body>
    <!-- 列表 -->
    <table class="table table-hover table-striped" id="table_result">
        <thead>
            <tr>
                <th>titieOne</th>
                <th>titleTwo</th>
                <th>titleThree</th>
            </tr>
        </thead>
        <tbody id="result">
            <tr>
                <td>1</td>
                <td>1</td>
                <td>1</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>2</td>
            </tr>
            <tr>
                <td>3</td>
                <td>3</td>
                <td>3</td>
            </tr>
            <tr>
                <td>4</td>
                <td>4</td>
                <td>4</td>
            </tr>
            <tr>
                <td>5</td>
                <td>5</td>
                <td>5</td>
            </tr>
            <tr>
                <td>6</td>
                <td>6</td>
                <td>6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>7</td>
                <td>7</td>
            </tr>
            <tr>
                <td>8</td>
                <td>8</td>
                <td>8</td>
            </tr>
            <tr>
                <td>9</td>
                <td>9</td>
                <td>9</td>
            </tr>
            <tr>
                <td>10</td>
                <td>10</td>
                <td>10</td>
            </tr>
        </tbody>
    </table>
    <!-- 分页生成的页码在这里显示 -->
    <div class="col-sm-6">
        <div class="dataTables_info" id="info"></div>
    </div>
    <div class="col-sm-6">
        <div class="dataTables">
            <ul class="pagination" id="pagination">
                //
                <li>
                    <a></a>
                </li>
            </ul>
        </div>
    </div>
</body>

</html>

<script>
    // 分页功能
    goPage(1, 2); // 我这里调用每页显示两条从一页开始


    function goPage(pno, psize) {
        var itable = document.getElementById("result"); //通过ID找到表格
        var idecs = document.getElementById("info");
        var num = itable.rows.length; //表格所有行数(所有记录数)
        var totalPage = 0; //总页数
        var pageSize = psize; //每页显示行数
        //总共分几页(总页数/每页要显示的行数)
        if (num % pageSize != 0) {
            totalPage = parseInt(num / pageSize) + 1;
        } else {
            totalPage = parseInt(num / pageSize);
        }

        var currentPage = pno; //当前页数
        var startRow = (currentPage - 1) * pageSize + 1; //开始显示的行 1
        var endRow = currentPage * pageSize; //结束显示的行   3
        endRow = (endRow > num) ? num : endRow;

        for (var i = 1; i < num + 1; i++) { //遍历所有数据,rows[i]是从0开始，但是后面与startRow做比较，所以i从1开始；
            var irow = itable.rows[i - 1]; //i-1，数据重0开始显示
            if (i >= startRow && i <= endRow) {
                irow.style.display = "table-row";

            } else {
                irow.style.display = "none";
            }
        }

        // 给DOM添加页码
        var tempStr = "";
        // 上一页
        if (currentPage > 1) { //若当前页不是第一页，则可以添加点击事件跳转到前一页
            tempStr += "<li><a href=\"#\" onClick=\"goPage(" + 1 + "," + psize + ")\">首页</a></li>";
            tempStr += "<li><a href=\"#\" onClick=\"goPage(" + (currentPage - 1) + "," + psize + ")\"><上一页</a></li>";

        } else { //若当前页是第一页，则不添加点击事件
            tempStr += "<li><a href=\"#\">首页</a></li>";
            tempStr += "<li><a href=\"#\"><上一页</a></li>";

        }
        // 中间页 （这里的代码仔细看，是通过if语句来判断当前点击的是哪一页，再进行拼接省略号(...)，根据当前页显示页码的个数可以自己改）  
        if (totalPage < 5) {
            for (var j = 1; j <= totalPage; j++) {
                tempStr += "<li><a href=\"#\" class=\"active\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "</a></li>";
            }
        } else if (totalPage > 5) {
            if (currentPage < 5) {
                for (var j = 1; j <= 5; j++) {
                    tempStr += "<li><a href=\"#\" class=\"active\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "</a></li>";
                }
                tempStr += "<li><a href=\"#\">...</a></li>";
            } else if (currentPage >= 5) {
                for (var j = 1; j <= 3; j++) {
                    tempStr += "<li><a href=\"#\" class=\"active\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "</a></li>";
                }
                tempStr += "<li><a href=\"#\">...</a></li>";
                if (currentPage + 1 == totalPage) {
                    for (var j = currentPage - 2; j <= totalPage; j++) { //当前页点击到倒数第二个页码时，...后面3个页码显示出来
                        tempStr += "<li><a href=\"#\" class=\"active\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "</a></li>";
                    }
                } else if (currentPage == totalPage) { //如果当前就是最后一页，那么...后面显示3个页码
                    for (var j = currentPage - 3; j <= totalPage; j++) {
                        tempStr += "<li><a href=\"#\" class=\"active\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "</a></li>";
                    }
                } else { //其他情况：总页码大于当前页码
                    for (var j = currentPage; j <= totalPage - 1; j++) {
                        tempStr += "<li><a href=\"#\" class=\"active\" onClick=\"goPage(" + j + "," + psize + ")\">" + j + "</a></li>";
                    }
                    tempStr += "<li><a href=\"#\">...</a></li>";
                }
            }
        }

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

        } else {
            tempStr += "<li><a href=\"#\"><下一页</a></li>";
            tempStr += "<li><a href=\"#\">尾页</a></li>";
        }
        document.getElementById("pagination").innerHTML = tempStr;
        idecs.innerHTML = "共" + num + "条记录，分" + totalPage + "页显示，当前" + currentPage + "页";
        var arr = document.getElementsByTagName("a");
        // 这里用来实现点击切换样式
        for (var i = 0; i < arr.length; i++) {
            if (arr[i].innerHTML == pno && arr[i].className.indexOf('active') > -1) {
                console.log(pno)
                console.log(arr[i])
                arr[i].style.color = 'red'
            }
        }
    }
</script>

含有注释

sslcsq
关注
  • 0
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
分页页码制作
Moriarty的专栏
01-29 1097
强大源于点滴 这次要实现的HTML分页页码的制作 也就是要做成这样 实现很简单了，div里面很多a标签，然后设置对应的css属性， 代码如下： 1 2 3 4 5 6 ... 200 > .page_normal a{ border: 1px solid #ff9600; padding: 5px 7px; color: #ff6500; text-deco
分页的制作（<li><a>标签循环）
qq_41447940的博客
03-05 344
新手上路 jsp界面代码 后台返回当前页数n
分页效果的实现
weixin_30900589的博客
11-22 94
分页效果的实现 分页效果其实就是a标签，具体代码如下 function getnumber($url,$curlpage,$totalrows,$rowspage){//传入四个必要的参数，地址，当前页，数据总数，每页的数据数 $totalpages=ceil($totalrows/$rowspage);//得到总共的页数 i...
原生分页查询原理步骤解析
XiaoLin
03-30 582
一、分页查询概述     分页查询则是在页面上将本来很多的数据分段显示，每页显示用户自定义的行数。可提高用户体验度，     同时减少一次性加载，内存溢出风险。 1.1、分页查询分类 1.1.1、真分页     每次翻页从数据库中查询数据。 优点：不容易造成内存溢出。 缺点：实现复杂，性能相对低。 1.1.2、假分页     一次性查询所有数据存
原生Js代码实现数据分页展示功能
weixin_47277897的博客
10-17 1005
虽然有很多分页的插件可以直接使用例如pagehelper等，但是在学习的过程中还是手敲的一遍原生的代码实现功能。 实现应该定义一个pageBean对象，代表的分页对象，里面有以下几个属性 private int totalCount; // 总记录数 private int totalPage; // 总页数 private int currentPage; // 当前页码 private int pageSize; // 没页显示的条数 private Li..
-pagination:原生JS实现的分页
07-15
原生JS实现的分页实现的功能之前在做项目的时候需要一个表格插件展示数据，当时用的是jquery datatable这个插件，但这个插件提供的分页功能在面对大数据的时候，过于呆板不够灵活，不能适应我们项目的需求，项目中...
原生js实现分页效果
10-14
以下是一个简化版的分页实现流程： 1. **创建分页元素**：根据配置创建“上一页”、“下一页”按钮、页码列表等元素，并将它们添加到页面的指定位置（`options.el`）。 2. **绑定事件**：为这些元素添加点击事件...
原生javascript实现分页效果
12-03
总的来说，这个原生JavaScript分页实现通过构造函数和原型链提供了分页功能，包括页码的生成和事件处理。尽管它相对简单，但对于理解JavaScript如何处理页面交互和DOM操作是非常有价值的。在实际项目中，你可能需要...
原生js + css实现分页
11-22
总的来说，使用原生JS和CSS实现分页虽然相比使用预封装的库更繁琐，但能提供更高的定制性，并有助于提升开发者对Web基础技术的理解。通过结合HTML布局、CSS样式和JavaScript逻辑，我们可以构建出符合项目需求的高效...
原生javascript实现的分页插件pagenav
10-25
在网页开发中，分页是一种常见的功能，用于处理大量数据的分块展示，提高用户体验。在给定的标题和描述中，我们了解到作者在寻找一个简单的...这种简洁的设计使得它在处理小型到中型的数据分页场景时非常实用。
纯js实现表格分页
10-16
使用纯JavaScript实现表格分页显示，提供页面跳转功能，包括首页、上一页、下一页、尾页等功能。
js+table分页
01-21
js+table分页实现，压缩包里有一个.html文件一个jQuery包，下载后可直接打开html文件，实现的功能包括：当前页、数据总量、页数、首页、上一页、下一页、尾页、页数跳转，只是功能实现没写css做美化
【js 分页】js 分页 方法一 【实用】
刘贵庆的博客
08-19 7931
纯js 分页功能。
原生JS实现分页效果
越陌度阡
07-18 2975
做开发久了，会越来越依赖框架，毕竟利用框架可以快速的完成工作任务，如常见的分页效果，只需要与后端配合，由后端返回总页数和当前第几页这两个参数传给一些框架的分页功能，就可以轻松的实现分页效果，那如果在不依赖框的情况下利用原生JS如何实现一个分页效果呢？接下来给大家分享一段分页代码实现下面的效果。 <!DOCTYPE html> <html> <head>.........
【JS案例】分页器——使用原生JavaScript实现
m0_50785976的博客
07-14 4933
原生js实现分页器功能
js 文章数据分页展示
xym_2000的博客
08-12 441
实现点击下方分页页码,动态战术数据
js分页显示
wendy专栏
03-28 766
1.HTML页面中代码如下&lt;div class="page"&gt; &lt;/div&gt;2.HTML中js代码引用&lt;script src="js/jquery.min.js"&gt;&lt;/script&gt; &lt;script src="js/model.js"&gt;&lt;/script&gt; &amp
简单的分页代码js实现
SeekerTime
07-10 8695
先看看效果图： 简单的分页js代码: 1、效果描述： 不用分页即可显示的jQuery插件 jQuery分页插件——jQuery.page.js用法很简单，效果很棒 2、调用方法：$(".tcdPageCode").createPage({ pageCount:10, current:1, backFn:function(p){ //单击回调方法，p是当前页码 } }
原生js之简单数据分页
我的博客
08-23 442
1. 最简单的数据分页 思想：点击下一页整体翻页，即页数整体+10（在该例中，实际上应整体加显示的页数对象的个数。），点击上一页整天向上翻页，即页数整体-10（同理）。点击目前显现的某一页数对应的对象，该对象背景变色。还要注意临界条件：向下翻页时，当当前显示的第一个页数对象的内容为1时，不再向下翻页。而向上翻页无临界。 完整代码 <!DOCTYPE html> <html l...
在vue里使用ul和li标签展示数据，完成分页功能，分页使用原生js实现
最新发布
06-09
好的，下面是在Vue中使用`ul`和`li`标签展示数据并完成分页功能的代码示例，分页使用原生`JavaScript`实现： ```html <a href="javascript:void(0)" @click="showPage(page)">{{ page }} ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值