JavaScript实现数据分页

最新推荐文章于 2024-04-10 22:15:53 发布
最新推荐文章于 2024-04-10 22:15:53 发布
阅读量4.5k 收藏 17
点赞数 8
文章标签： java javascript html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xiuyuandashen/article/details/106104892
版权

目录

分页

当表单数据过多时，比较不容易浏览。这个时候就需要分页查看。

效果图

在这里插入图片描述

如何分页

1、首先确定总记录条数 len
2、单页浏览条数 page_number
3、页数 Total_pages=len % page_number == 0 ? len / page_number : len / page_number + 1;

计算出页数后就好办了,我们只需要对页码按钮设置点击事件，事件内容为，根据页数显示表格中的数据。数据用一个数组对象来保存，我们只需要遍历数组对象在页面展示即可。
数据展示的范围为：start为每页循环遍历数据数组的起点，end为终点
如果当前页数大于1则start=(pagethis-1)*page_number end=start+page_number
如果当前页数等于1则start=0 end=page_number-1
如果end>数据数组的最大下标值 则让end=数据数组的最大下标值

代码

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,minimal-ui:ios">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="">
    <script src=""></script>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <style>
        #main {
            width: 80%;
            margin: 20px auto;
        }
        
        nav {
            text-align: center;
        }
    </style>
</head>

<body>
    <div id="main">
        <table class="table table-bordered">
            <tbody>
                <tr>
                    <th>商品名称</th>
                    <th>商品价格</th>
                    <th>图片路径</th>
                </tr>
            </tbody>

        </table>
        <nav aria-label="Page navigation">
            <ul class="pagination">
                <li id="pre">
                    <a href="#" aria-label="Previous">
                        <span aria-hidden="true">&laquo;</span>
                    </a>
                </li>
              
            </ul>
        </nav>
    </div>

</body>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
<script>
    var table = document.querySelector("table")
    //模拟后台响应的数据
    var json = [{
        "product_id": "1001",
        "product_name": "java核心技术1",
        "price": "120",
        "imgurl": "res/productimg/1.jpeg"
    }, {
        "product_id": "1002",
        "product_name": "java核心技术2",
        "price": "130",
        "imgurl": "res/productimg/2.jpeg"
    }, {
        "product_id": "1003",
        "product_name": "web技术",
        "price": "100",
        "imgurl": "res/productimg/3.jpeg"
    }, {
        "product_id": "1004",
        "product_name": "Mysql必知必会",
        "price": "39",
        "imgurl": "res/productimg/4.jpeg"
    }, {
        "product_id": "1005",
        "product_name": "中国近代史",
        "price": "105",
        "imgurl": "res/productimg/4.jpeg"
    }, {
        "product_id": "1006",
        "product_name": "世界史",
        "price": "110",
        "imgurl": "res/productimg/1.jpeg"
    }, {
        "product_id": "1007",
        "product_name": "高等数学",
        "price": "50",
        "imgurl": "res/productimg/1.jpeg"
    }, {
        "product_id": "1008",
        "product_name": "离散数学",
        "price": "60",
        "imgurl": "res/productimg/1.jpeg"
    }, {
        "product_id": "1010",
        "product_name": "线性代数",
        "price": "50",
        "imgurl": "res\\productimg/3e83c2a6-b529-4bee-8ca9-ecc868b4d6f7.jpeg"
    }, {
        "product_id": "1011",
        "product_name": "数据结构",
        "price": "100",
        "imgurl": "res\\productimg/53dccb9f-b918-4a81-acc9-f99594992db1.jpeg"
    }, {
        "product_id": "1013",
        "product_name": "人工智能",
        "price": "120",
        "imgurl": "res\\productimg/94736781-046b-4c7c-8499-bebad2542b6f.jpg"
    }, {
        "product_id": "1014",
        "product_name": "大数据",
        "price": "120",
        "imgurl": "res\\productimg/f891569d-45e3-4b7f-a37e-980273f84508.jpg"
    }];
    var ul = document.querySelector(".pagination");
    var page_number = 5; //单页浏览的条数
    var Total_pages; //页数
    var liAll; //页码按钮下标为 1到length-2是页数 0和length-1为上一页和下一页
    var pre; //上一页
    var next; //下一页

    function clearTable() {
        table.innerHTML = `
        <tbody>
             <tr>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>图片路径</th>
            </tr>
        </tbody>
        `
    }
    window.onload = function() {
        json.forEach(function(item, i) {
            var tbody = document.querySelector("tbody");
            if (i < page_number) {
                var tr = document.createElement("tr");
                tr.innerHTML = `
                            <td>${item.product_name}</td>
                            <td>${item.price}</td>
                            <td>${item.imgurl}</td>
                            `
                tbody.appendChild(tr);
            }

        })

        var len = json.length; //总记录条数

        Total_pages = len % page_number == 0 ? len / page_number : len / page_number + 1; //页数

        for (var i = 1; i <= Total_pages; i++) {
            ul.innerHTML += `
            <li  id="${i}"><a href="#">${i}</a></li>
            `
        }

        ul.innerHTML += `
                <li id="next">
                    <a href="#" aria-label="Next">
                        <span aria-hidden="true">&raquo;</span>
                    </a>
                </li>
        `;
        liAll = document.querySelectorAll("li");
        liAll[1].childNodes[0].style.color = "red"; //初始第一页页码是红的
        // console.log([liAll])
        var pagethis = 1; //当前是第几页
        for (var i = 1; i < liAll.length - 1; i++) {
            liAll[i].onclick = function() {
                for (var j = 1; j < liAll.length - 1; j++) {
                    liAll[j].childNodes[0].style.color = "blue"
                }
                pagethis = this.id; //获取当前是第几页
                liAll[pagethis].childNodes[0].style.color = "red";
                // console.log(liAll[i])
                let start; //当页数据的起始下标
                let end; //当页数据的结束下标
                if (pagethis != 1) {
                    start = (pagethis - 1) * page_number;
                    end = start + page_number;
                    if (end > json.length - 1) { //如果当页数据结束值大于总数据条数下标的值则赋值为总数据条数最大下标值
                        end = json.length - 1;
                    }
                } else {
                    start = 0;
                    end = page_number - 1;
                }
                // console.log("start=" + start)
                // console.log("end=" + end)
                clearTable();
                var tbody = document.querySelector("tbody");
                json.forEach(function(item, i) {

                    if (i >= start && i <= end) {
                        var tr = document.createElement("tr");
                        tr.innerHTML = `
                            <td>${item.product_name}</td>
                            <td>${item.price}</td>
                            <td>${item.imgurl}</td>
                            `
                        tbody.appendChild(tr);
                    }
                })

            }
        }
        pre = document.querySelector("#pre") //上一页
        next = document.querySelector("#next") //下一页
        pre.onclick = function() {
            // alert(pagethis)
            if (pagethis != 1) { //当前页数不等于1时执行上一页
                pagethis--;
                for (var j = 1; j < liAll.length - 1; j++) {
                    liAll[j].childNodes[0].style.color = "blue"
                }
                liAll[pagethis].childNodes[0].style.color = "red";
                let start;
                let end;
                if (pagethis != 1) {
                    start = (pagethis - 1) * page_number;
                    end = start + page_number;
                    if (end > json.length - 1) {
                        end = json.length - 1;
                    }
                } else {
                    start = 0;
                    end = page_number - 1;
                }

                clearTable();
                var tbody = document.querySelector("tbody");
                json.forEach(function(item, i) {
                    if (i >= start && i <= end) {
                        var tr = document.createElement("tr");
                        tr.innerHTML = `
                            <td>${item.product_name}</td>
                            <td>${item.price}</td>
                            <td>${item.imgurl}</td>
                            `
                        console.log(tr)
                        tbody.appendChild(tr);
                    }
                })
            }
        }
        next.onclick = function() {
            // alert(pagethis)
            if (pagethis < liAll.length - 2) { //当前页数小于最后一页则执行下一页
                pagethis++;
                for (var j = 1; j < liAll.length - 1; j++) {
                    liAll[j].childNodes[0].style.color = "blue"
                }
                liAll[pagethis].childNodes[0].style.color = "red";
                let start;
                let end;
                if (pagethis != 1) {
                    start = (pagethis - 1) * page_number;
                    end = start + page_number;
                    if (end > json.length - 1) {
                        end = json.length - 1;
                    }
                } else {
                    start = 0;
                    end = page_number - 1;
                }

                clearTable();
                var tbody = document.querySelector("tbody");
                json.forEach(function(item, i) {
                    if (i >= start && i <= end) {
                        var tr = document.createElement("tr");
                        tr.innerHTML = `
                            <td>${item.product_name}</td>
                            <td>${item.price}</td>
                            <td>${item.imgurl}</td>
                            `
                        console.log(tr)
                        tbody.appendChild(tr);
                    }
                })
            }
        }

    }
</script>


</html>
锋君
关注
  • 8
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
javascript实现前端分页效果
01-19
本文实例为大家分享了javascript实现前端分页效果的具体代码，供大家参考，具体内容如下 需求：实现分页请求表格数据，ajax暂时没写，只写了分页的功能。 效果图： 当页数是第一页的时候，首页和向前那个按钮处于...
如何在获取全部数据后通过js纯前端实现分页效果
bug处理进行时
12-05 9430
之前一直使用前后端配合的方式实现分页效果，即在后台将数据进行分页处理，前端向后端发送页数参数，单独的请求某一页的数据。目前在数据量不是很大的基础上要实现js纯前端分页，找了几个插件没有很好的解决方案，最后参照网络博客使用js实现。说明：在调研过程中参考了一位大神的博客，但是忘记了博客链接，部分代码直接来自于该博客。
Vue.js如何实现对一千张图片进行分页加载？
qq_38334677的博客
02-18 859
分页加载和懒加载都是用于优化网页性能和用户体验的技术。分页加载是指将一个大型内容列表分成多个小的部分（例如每页显示10个），然后在用户向下滚动页面时，加载下一页的内容。这种技术可以减少页面加载时间和带宽使用，并提高页面的反应速度。此外，分页加载还可以让用户更轻松地找到他们想要的内容，而不必一次性浏览大量的内容。懒加载是指在用户浏览网页时，仅加载当前可见的部分内容，而不是一次性加载整个页面。例如，在一个包含多张图片的页面中，只有当用户向下滚动页面时，才会加载下面的图片。
js前端计算分页
最新发布
钱端猿的博客
04-10 347
这个函数接受总数据量、当前页码和每页条目数作为参数，计算并返回相应的分页信息。在实际应用中，你可以根据这些信息来显示分页控件，并请求对应页码的数据。要在前端计算分页，你需要知道总数据量、每页显示的条目数和当前页码。
【js 分页】js 分页 方法一 【实用】
刘贵庆的博客
08-19 7915
纯js 分页功能。
js实现数据分页算法
赵佳敏的博客
09-17 2999
数据分页算法一、分页算法二、百度分页算法三、带数据的分页算法 一、分页算法 <script> <!-- 分页的逻辑算法--> //当前页和总页码 var nowPage=10; var totlePage=20; var navEle=null; var up=null; var down=null; var totle=null; var go=null; var num=null; .
javascript 实现分页
weixin_35755188的博客
02-13 1975
JavaScript 实现分页可以使用以下步骤： 计算出需要分页的数据总量和每页显示的数据数量。 根据总数据量和每页数据量计算出需要的总页数。 根据当前页码计算出该页的数据在总数据中的起始位置和结束位置。 根据起始位置和结束位置截取出当前页的数据。 在界面上显示当前页的数据，并提供页码控制功能，使用户可以在不同的页码间切换。 以下是一个简单的 JavaScript 代码示例： ```...
用js实现分页
weixin_42609225的博客
01-05 538
使用 JavaScript 实现分页可以使用以下步骤： 首先，你需要确定你要分页的数据，并计算出数据的总页数。 然后，你可以在页面上创建一个分页组件，用来显示分页按钮。 为每个分页按钮添加点击事件处理函数。在这个函数中，你可以使用 AJAX 技术从服务器获取相应页的数据，然后在页面上渲染出来。 当用户点击分页按钮时，你可以使用 JavaScript 改变页面上分页组件的样式，以此来指示当前...
JavaScript实现分页效果
10-20
JavaScript实现分页效果是网页开发中的常见需求，特别是在数据量较大、需要分批加载内容时。本示例通过JavaScript和CSS实现了一个简单的分页组件，适用于动态数据展示和用户交互。 首先，HTML结构中包含了分页组件...
javascript实现前端分页功能
01-22
前言：今天给大家带来的是前端数据的分页功能，供大家参考，具体内容如下 先上一波效果图展示： 直接上代码：这里使用的是JavaScript来实现 关于代码详解都以注释的方式写在JavaScript里的 HTML： <!DOCTYPE ...
JavaScript实现前端分页控件
11-27
当后台数据到达后，浏览器重新渲染界面当然也包括js分页控件，如果觉得每次绘制分页控件对前端性能有影响也可以不绘制，但实现起来相对麻烦。  本人写的分页控件参考了其他网友的代码，链接忘了，控件接受四个参数...
纯js分页-用js实现分页显示
01-05
纯js分页,用js将内容以分页的形式展现出来，处理数据更简单
纯JS前端分页方法（JS分页）
最爱喝怡宝的博客
05-15 2396
如后台传回的数据条数非常多，达到几千条甚至上万条，但是后台又不方便分页传回数据，这个时候就只能前端先获取所有数据保存下来，然后前端本地进行分页并渲染显示。1、JS分页函数：开发过程中，分页功能一般是后台提供接口，前端只要传page（当前页码）和pageSize（每页最大显示条数）及对应的其他查询条件，就可以返回所需分页显示的数据。原创博客禁止抄袭，原文地址:https://www.cnblogs.com/xiao-pengyou/只需要传入对应参数就可以返回带有对应分页属性的对象，用于前端界面展示。
javascript 分页算法
weixin_34005042的博客
05-05 109
2019独角兽企业重金招聘Python工程师标准>>> ...
JavaScript实现列表分页（小白版）
分享Java，vue学学习笔记
03-26 2357
上方获li获取标签为8；这里是一个页面显示5条数据所以对pageLi进行取模；为0则是Math.floor不是则是Math.ceil，Math.floor是向下取整（ 1.6 => 1），Math.ceil为向上取整（1.6=>2 ），所以这里n最后等于2，页面为2。第一步：修改一下样式（一条li标签假如有40的高度，现在有8个则整个ul有320；我现在需要进行一个页面显示5条数据；第四步：对分页两个li做点击事件进行分页显示。在获取分页li进行样式设置。以ul列表为例进行分页。第三步：创建分页标签。
【js】js实现分页01
qq_36557846的博客
09-01 1205
js实现分页
js如何实现分页
百变鹏仔工作室
01-25 656
在 JavaScript 中，实现分页功能通常需要结合后端数据接口和前端页面展示来完成。后端数据接口：后端需要提供一个数据接口，用于获取分页的数据。通常，接口会接受一个分页参数，如当前页。前端页面展示：在前端页面，通过 JavaScript 代码来调用后端接口并处理分页逻辑。上述代码是一个简单的分页实现示例。通过点击分页按钮，触发事件监听器，根据按钮上的。函数获取新的数据，然后更新页面展示。属性设置新的页码，并调用。，并返回相应页的数据。
JavaScript经典实例之分页（简单易用）原生js封装分页（一次性数据）
编程界明世隐的博客
12-17 2463
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <style> *{ margin:5px; padding:0; } .table { word-break: br...
javascript实现表格分页
09-03
Javascript可以通过以下步骤实现表格分页： 1. 首先，需要根据数据的总数和每页显示的行数计算出总页数。可以使用`Math.ceil()`函数将数据总数除以每页显示的行数，并向上取整。 2. 然后，需要定义一个函数来生成表格的分页导航。这个函数可以接受当前页码和总页数作为参数，并根据这些信息生成页码链接。可以使用循环语句或者`document.createElement()`函数来动态生成页码链接，并将它们添加到页面上适当的位置。 3. 接着，需要定义一个函数来根据当前页码显示相应的表格内容。可以根据当前页码和每页显示的行数来计算出要显示的数据的起始索引和结束索引，然后通过相应的DOM操作将选定的数据行显示在表格中。 4. 最后，需要给每个生成的页码链接添加点击事件监听器，当点击某个页码链接时，会调用前面定义的函数来显示相应的表格内容。 总结起来，javascript实现表格分页的关键步骤包括计算总页数、生成分页导航、根据当前页码显示表格内容和处理页码链接的点击事件。通过这些步骤，可以实现一个简单的表格分页功能。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值