纯js实现分页

最新推荐文章于 2023-03-26 17:33:02 发布
最新推荐文章于 2023-03-26 17:33:02 发布
阅读量639 收藏
点赞数 1
分类专栏： 【前端】 文章标签： 分页 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wudalang_gd/article/details/68932484
版权

原理：所有数据已加载好，js通过遍历部分显示，实现分页效果

html代码

<html>
<head>
    <meta charset='utf-8'>
<script type="text/javascript" src="page.js"></script>

 <style type="text/css">
    #idData {color: red;border: solid;text-align: center;}
    a{text-decoration: none;}
 </style>
</head>
<body onLoad="goPage(1,10);">
    <table id="idData" width="70%">        
        <tr><td>liujinzhong1</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong2</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong3</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong4</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong5</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong6</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong7</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong8</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong9</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong10</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong11</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong12</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong13</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong14</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong15</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong16</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong17</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong18</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong19</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong20</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong21</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong22</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong23</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong24</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong25</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong26</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong27</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong28</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong29</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong30</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong31</td><td>25</td><td>男</td><td>山西吕梁</td></tr>        
        <tr><td>liujinzhong32</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong33</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong34</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong35</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong36</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
        <tr><td>liujinzhong37</td><td>25</td><td>男</td><td>山西吕梁</td></tr>        
        <tr><td>liujinzhong38</td><td>25</td><td>男</td><td>山西吕梁</td></tr>        
        <tr><td>liujinzhong39</td><td>25</td><td>男</td><td>山西吕梁</td></tr>        
        <tr><td>liujinzhong40</td><td>25</td><td>男</td><td>山西吕梁</td></tr>        
    </table>
    <table width="60%" align="right">
        <tr><td><div id="barcon" name="barcon"></div></td></tr>
    </table>
</body> 
</html>

js实现分页

/**
 * 分页函数
 * pno--页数
 * psize--每页显示记录数
 * 分页部分是从真实数据行开始，因而存在加减某个常数，以确定真正的记录数
 * 纯js分页实质是数据行全部加载，通过是否显示属性完成分页功能
 **/
function goPage(pno,psize){
    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;//开始显示的行  31 
       var endRow = currentPage * pageSize;//结束显示的行   40
       endRow = (endRow > num)? num : endRow;    40
       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=\"#\" onClick=\"goPage("+(1)+","+psize+")\">首页</a>";
        tempStr += "<a href=\"#\" onClick=\"goPage("+(currentPage-1)+","+psize+")\"><上一页</a>"
    }else{
        tempStr += "首页";
        tempStr += "<上一页";    
    }

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

    document.getElementById("barcon").innerHTML = tempStr;

}

效果：

wblearn
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js 文章数据分页展示
xym_2000的博客
08-12 438
实现点击下方分页页码,动态战术数据
javascript 实现分页
weixin_35755188的博客
02-13 1976
JavaScript 实现分页可以使用以下步骤： 计算出需要分页的数据总量和每页显示的数据数量。 根据总数据量和每页数据量计算出需要的总页数。 根据当前页码计算出该页的数据在总数据中的起始位置和结束位置。 根据起始位置和结束位置截取出当前页的数据。 在界面上显示当前页的数据，并提供页码控制功能，使用户可以在不同的页码间切换。 以下是一个简单的 JavaScript 代码示例： ```...
【js 分页】js 分页 方法一 【实用】
刘贵庆的博客
08-19 7920
纯js 分页功能。
JavaScript实现列表分页（小白版）
分享Java，vue学学习笔记
03-26 2361
上方获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实现分页
u013723671的博客
01-06 536
【转载纯JS分页】
js实现数据分页算法
赵佳敏的博客
09-17 3002
数据分页算法一、分页算法二、百度分页算法三、带数据的分页算法 一、分页算法 <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实现分页(两种方法)
10-23
本篇文章将介绍两种纯JavaScript实现分页的方法，适用于不依赖任何外部库或框架的情况。 **方法一** 首先，我们需要在HTML中创建一个用于显示分页链接的基本结构。这个结构包括上一页、下一页、数字页码、跳转至...
纯JS前端实现分页代码
11-25
在这个场景中，我们讨论的是如何使用纯JavaScript实现前端分页，不依赖任何第三方库或插件。下面将详细解释实现这个功能的关键步骤和涉及的技术。 1. **HTML结构**： 分页组件通常包含“首页”、“上一页”、...
纯js实现分页 可跳转指定页
09-18
本文将详细讨论如何使用纯JavaScript实现分页功能，以及如何实现跳转指定页和自定义样式。 首先，我们需要理解分页的基本原理。分页通常涉及到两个关键参数：每页显示的数据量（每页条数）和当前页数。根据这些参数...
纯JAVASCRIPT实现分页
06-17
得用JavaScript面向对象编程，编写了一个分页通过控件。代码精简，功能强大.
js把数组分页显示(基本思路)
02-11
js把数组分页显示(基本思路) 请用非IE6浏览器浏览。 ：IE6未能正常显示：呵。不知为啥。没时间去改（重要的是思路）
javascript 分页显示数据
01-16
一个非常好用的分页显示数据器（javascript编写） 支持排序电击操作，可自定义电击事件方法
纯js实现表格分页
10-16
使用纯JavaScript实现表格分页显示，提供页面跳转功能，包括首页、上一页、下一页、尾页等功能。
通过JS实现数据分页
qq_45038782的博客
06-07 3126
通过JS实现数据分页 原理 加载数据； 构造简单页面； 通过JS动态操作数据及界面，实现数据分页。 代码实现 html 1.引用外部js文件 <meta charset="UTF-8"> <title>数据分页</title> <!--注意调用顺序--> <script src="js/Data.js" type="text/javasc...
JavaScript经典实例之分页（简单易用）原生js封装分页（一次性数据）
编程界明世隐的博客
12-17 2465
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=GBK"> <style> *{ margin:5px; padding:0; } .table { word-break: br...
【js】js实现分页01
qq_36557846的博客
09-01 1209
js实现分页
js 拉取所有数据，前端进行分页处理
yu2015java的博客
05-30 9150
拉取所有数据，前端进行分页处理 序号 1 2 3 4 5 6
JavaScript（二十二）数据分页demo
We_jia的博客
03-07 265
数据分页效果图 思路分析 在每页上显示定量的数据，通过给button绑定点击事件来实现翻页的效果，利用面向对象的开发方法，将所需的变量定义，根据需要去调用，建立计算总页数函数、当前页函数、创建页面数据函数、创建点击类函数、创建页数显示函数进行元素之间的相互调用，实现在页面上显示初始页的值和实现下方翻页按钮的功能，最终实现数据分页的效果。 HTML代码 &lt;!DOCTYPE ht...
----JS缓存页面数据---
傾城如夢的专栏
01-02 2806
//简单设置JS缓存 //1. 将数据设置到缓存： //JsCache.set(key,value,expirs), expirs也可以不设置，默认是60秒 //读取缓存：JsCache._cacheData.key var JsCache = {     _cacheEndTime: 0, //缓存截止时间     _cacheData: {}, //以JSON对象存储     _
js实现分页
最新发布
05-31
在JS中实现分页，可以通过以下步骤来实现： 1. 定义每页显示的数据数量（pageSize）以及当前页码（currentPage）。 2. 将数据按照每页的数量进行分割，得到分页后的数据。 3. 根据当前页码，从分页后的数据中获取对应页码的数据。 4. 根据分页后的数据，动态生成分页按钮，通过点击按钮来切换页码。 以下是一个简单的分页代码示例： ```javascript // 定义每页显示的数据数量 var pageSize = 10; // 定义当前页码 var currentPage = 1; // 假设有100条数据 var data = []; for (var i = 1; i <= 100; i++) { data.push(i); } // 分页函数 function pagination(data, pageSize, currentPage) { // 计算总页数 var totalPages = Math.ceil(data.length / pageSize); // 获取当前页码的数据 var start = (currentPage - 1) * pageSize; var end = start + pageSize; var currentData = data.slice(start, end); // 渲染数据 // ... // 渲染分页按钮 var paginationHtml = ''; for (var i = 1; i <= totalPages; i++) { if (i === currentPage) { paginationHtml += '<span class="active">' + i + '</span>'; } else { paginationHtml += '<span>' + i + '</span>'; } } // ... // 点击分页按钮切换页码 var pagination = document.querySelector('.pagination'); pagination.addEventListener('click', function(e) { if (e.target.tagName.toLowerCase() === 'span') { currentPage = parseInt(e.target.innerText); pagination(data, pageSize, currentPage); } }); } // 初始化分页 pagination(data, pageSize, currentPage); ``` 在上面的代码示例中，我们定义了每页显示的数据数量为10，当前页码为1，然后将100条数据进行分页，获取当前页码的数据，并渲染数据和分页按钮。点击分页按钮时，根据所点击的按钮的页码重新渲染分页和数据。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值