JS+CSS实现分页的两个方法（完整代码）

最新推荐文章于 2024-05-11 21:58:00 发布
最新推荐文章于 2024-05-11 21:58:00 发布
阅读量2.5k 收藏 6
点赞数 3
文章标签： javascript css html5 es6 css3

几个分页的方法（转载）

代码如下:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>js分页效果</title>
<style>
* {
    margin:0;
    padding:0;
}
img {
    border:0;
}
ol,ul,li {
    list-style:none;
}
.box {
    width:100%;
    height:500px;
    position:relative;
}
#conten {
    width:400px;
    height:320px;
    margin:20px auto;
    border:1px solid #ccc;
    overflow:hidden;
}
#conten li {
    width:100%;
    height:40px;
    border-bottom:1px solid #ff0000;
}
#btn {
    width:180px;
    height:30px;
    margin:20px auto;
    border:1px solid #ccc;
    padding:5px 10px;
    position:relative;
    overflow:hidden;
}
</style>
</head>
<body>
<div class="box">
    <ul id="conten">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
        <li>9</li>
        <li>10</li>
        <li>11</li>
        <li>12</li>
        <li>13</li>
        <li>14</li>
        <li>15</li>
        <li>16</li>
        <li>17</li>
        <li>18</li>
        <li>19</li>
        <li>20</li>
        <li>21</li>
        <li>22</li>
        <li>23</li>
        <li>24</li>
        <li>25</li>
        <li>26</li>
        <li>27</li>
        <li>28</li>
        <li>29</li>
        <li>30</li>
        <li>31</li>
        <li>32</li>
        <li>33</li>
        <li>34</li>
        <li>35</li>
        <li>36</li>
        <li>37</li>
        <li>38</li>
        <li>39</li>
        <li>40</li>
        <li>41</li>
        <li>42</li>
        <li>43</li>
        <li>44</li>
        <li>45</li>
        <li>46</li>
        <li>47</li>
        <li>48</li>
        <li>34</li>
        <li>35</li>
        <li>36</li>
        <li>37</li>
        <li>38</li>
        <li>39</li>
        <li>40</li>
        <li>41</li>
        <li>42</li>
        <li>43</li>
        <li>44</li>
        <li>45</li>
        <li>46</li>
        <li>47</li>
        <li>48</li>
        <li>34</li>
        <li>35</li>
        <li>36</li>
        <li>37</li>
        <li>38</li>
        <li>39</li>
        <li>40</li>
        <li>41</li>
        <li>42</li>
        <li>43</li>
        <li>44</li>
        <li>45</li>
    </ul>
    <ul id="btn">
    </ul>
</div>

<script>
    //总结：分页必须要搞清楚几个参数：1、一共几条数据 2、每页显示几条数据（x）  3、一共几页
    // 难点：点击第n页时，显示哪几条数据(n-1)*x+1～n*x条数据（n>=1）
window.onload = function() {
    var oConten = document.getElementById("conten");
    var oLi = oConten.getElementsByTagName("li");
    var bBtn = document.getElementById("btn");

    var n = 0;//页面数量（重点）
    // 页面内容控制
    if (oLi.length % 8 == 0) {//计算页数
        n = oLi.length / 8 | 0;//Math.floor()
    } else {
        n = (oLi.length / 8 | 0) + 1;//Math.ceil()
    }
    //添加页码标签（几个页面就添加几个页码）
    for (var i = 1; i <= n; i++) {
        cLi = document.createElement("li");
        cLi.style.cssText = "width:30px; height:30px; background:#ff0000;margin:0 5px;display: inline-block;position:absolute; transition:left 0.5s";
        cLi.innerHTML = i;
        bBtn.appendChild(cLi);
    }

    var aLi = bBtn.getElementsByTagName("li");
    for (var i = 0; i <= n - 1; i++) {
        aLi[i].index = i;
        aLi[0].style.background = "#ccc";
        aLi[i].style.left = i * 40 + "px";
        // alert(aLi[i].index)

        //点击页码做3件事
        aLi[i].onclick = function() {
            b = this.index;
            // alert(b)
            // 1.当前页码active（简单功能）
            for (var j = 0; j < aLi.length; j++) {
                aLi[j].style.background = "#ff0000";
            }
            this.style.background = "#ccc";
            //2.页码滚动（该功能可有可无）
            if (b <= 2) {
                for (var j = 0; j < aLi.length; j++) {
                    aLi[j].style.left = j * 40 + "px";
                }
            }
            if (b > 2 && b < (n - 2)) {
                for (var j = 0; j < aLi.length; j++) {
                    aLi[j].style.left = (j - b + 2) * 40 + "px";
                }
            }
            //3.页面切换
            for (var j = 0; j < oLi.length; j++) {//点击第b页，先让 所有页面隐藏
                oLi[j].style.display = "none";
            }
            for (var j = (b * 8); j < (b + 1) * 8; j++) {//再显示第 b * 10条 至 (b + 1) * 8-1条数据(b>=0)（重难点）
                oLi[j].style.display = "block";
            }
        }
    }
}
</script>
</body>
</html>

效果如下（CSS略显简陋）

方法二：

<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; color: rgb(0, 170, 255);}
 </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>
    <script>
      /**
 * 分页函数
 * 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;

}
    </script>
</body> 
</html>

 

willwe
关注
  • 3
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
纯JS前端实现分页代码
11-25
先给大家展示下效果图，如果大家感觉效果不错，请参考实现代码： 因为这是我自己第一次动手用js写分页，写的应该也不是很完美，有些公共的没有抽取出来，但是用起来还是可以的，这块代码是可以把它当做公共的分页去处理的，我就是用这块代码写了两个稍微不同一些的分页！公共的代码抽取的也差不多，主要就是ajax后台以及返回的值不同而已，只要把总页码的值获取到，点击首页/下一页等传值正确的话，基本上分页是不会出什么问题的  网上确实有很多分页的插件以及开源代码，单本是一个后台开发猿，前台css等样式还驾驭不住，所以就开始自己去写了。其实这个分页原理很简单，就是用ajax往后台传值(当前页码)，后台使用lim
仿京东的商品展示详情页面
11-16
仿照京东商品展示详情页做的demo,解压到Hbuilder或者其他IDE中即可使用,商城项目中可以直接拿过来修改使用。
jquery实现分页切换
Amouzy的博客
06-24 921
案例效果： 点击下面页码，选择对应页面的效果。点击向左向右的箭头，页面切到上一张或者下一张，当前页面是第一张时不能继续选择上一张，反之亦然。 html: css: 向左向右的箭头如下：
JS实现分页功能
最新发布
hexadecimal_001的博客
05-11 261
【代码】JS实现分页功能。
网页分页实现（css+js）
牧心人的专栏
08-21 2143
最近通过自己的摸索，通过css和js实现了一个简单的网页分页显示功能，现在分享给大家。有什么不足和改进之处，欢迎大家留言一起讨论，一起学习。
Java前端：HTML——列表
fancy_male的博客
09-16 125
有序列表 <ol> <li>Java</li> <li>Python</li> </ol> 无序列表 <ul> <li>Java</li> <li>Python</li> </ul> 自定义列表 <dl> <dt>列表名称</dt> <dd>内容</dd> <dd>内容<
CSS 分页实例
m0_67633378的博客
03-05 190
简单分页 如果你的网站有很多个页面，你就需要使用分页来为每个页面做导航。 以下实例演示了如何使用 HTML 和 CSS 来创建分页： CSS 实例 ul.pagination{ display:inline-block; padding:0; margin:0; } ul.pagination li{display:inline;} ul.pagination li a{ color:black; float:left; paddin...
html css js 分页
qq_25239049的博客
04-19 628
样式基于bootstrap <ul class="pagination" data-page="1"> <li id="sortTable_previous"> <a href="javascript:void(0);" data-type="left"> <span class="icon font_family icon-jia...
分页样式（CSS+JS+JQuery）
03-24
为什么要这么多的字呢？这个就是分页样式分页样式分页样式
纯javascript实现分页(两种方法)
01-19
这块代码写了两个稍微不同一些的分页！公共的代码抽取的也差不多，主要就是ajax后台以及返回的值不同而已，只要把总页码的值获取到，点击首页/下一页等传值正确的话，基本上分页是不会出什么问题的 纯j
js table设置表格行tr分页代码简单的分页代码下载
11-11
js table设置表格行tr分页代码简单的分页代码下载
原生js + css实现分页
11-22
原生js+css分页
vue+Element-ui实现分页效果实例代码详解
10-17
Vue.js是一个轻量级的前端框架，它结合Element UI库可以轻松实现高效的分页效果。Element UI提供了丰富的组件，其中包括`Pagination`分页组件，使得开发者能够快速实现美观且功能完善的分页功能。 在Vue+Element UI...
css之分页打印的示例代码
09-24
在CSS中，分页打印是一...总的来说，CSS分页打印是一个涉及CSS、JavaScript以及对浏览器和打印机特性的理解的综合问题。通过深入学习和实践，你可以更好地控制网页内容在打印时的展示，创建专业且易于阅读的多页文档。
Spring Data JPA+kkpager实现分页功能实例
08-30
这涉及到两个关键类：`Pageable`和`Page`。`Pageable`接口代表了分页请求的参数，如页码、每页大小和排序信息。`Page`接口则表示查询结果，包含实际的数据、总页数和是否为最后一页等信息。 在定义Repository接口时...
在 JavaScript 中为任何表格添加分页
allway2的博客
04-02 1816
分页是每个人都讨厌在他们的网站上实现的那些事情之一，并且在数据大小需要它之前我们会避免这样做。或者直到页面太长以至于滚轮断开并且浏览器崩溃。并且有充分的理由。通常，这是一项有些乏味且不必要的复杂任务。但是一项非常需要的繁琐而复杂的任务。以下脚本旨在一劳永逸地处理 HTML 表格的所有客户端分页。 要详细了解分页逻辑的工作原理，请随时查看我的博客文章。 只要它有助于您的编码之旅，请随意使用它并以您希望的任何方式进行修改。我只想问，如果你这样做的话，你会以我的方式说些客气话。 在我们开始之前，如果您对
京东分页
duanyuehuan
06-03 338
左右侧滑动 插件 fastclick
CSS+JS实现静态页面分页
后知后觉
06-28 1059
1
html中使用js+table 实现分页
06-06
可以通过以下步骤使用 JavaScript 和 HTML 表格来实现分页： 1. 在 HTML 中创建一个表格，并设置 ID 和类名： ``` <table id="myTable" class="table"> <thead> <tr> <th>列1</th> <th>列2</th> <th>列3</th> </tr> </thead> <tbody> <tr> <td>行1列1</td> <td>行1列2</td> <td>行1列3</td> </tr> <tr> <td>行2列1</td> <td>行2列2</td> <td>行2列3</td> </tr> ... </tbody> </table> ``` 2. 在 JavaScript 中定义每页显示的行数和当前页码： ``` var rowsPerPage = 10; // 每页显示10行 var currentPage = 1; // 当前页码默认为1 ``` 3. 编写一个函数来显示当前页的行数： ``` function showTableRows() { var table = document.getElementById('myTable'); var rows = table.getElementsByTagName('tr'); var startIndex = (currentPage - 1) * rowsPerPage + 1; // 计算当前页的起始行索引 var endIndex = startIndex + rowsPerPage - 1; // 计算当前页的结束行索引 for (var i = 0; i < rows.length; i++) { if (i < startIndex || i > endIndex) { rows[i].style.display = 'none'; // 隐藏不在当前页范围内的行 } else { rows[i].style.display = ''; // 显示在当前页范围内的行 } } } ``` 4. 编写一个函数来显示页码和添加事件监听器： ``` function showPagination() { var table = document.getElementById('myTable'); var rows = table.getElementsByTagName('tr'); var totalPages = Math.ceil(rows.length / rowsPerPage); // 计算总页数 var pagination = document.createElement('div'); // 创建一个分页容器 pagination.className = 'pagination'; for (var i = 1; i <= totalPages; i++) { var pageLink = document.createElement('a'); // 创建一个页码链接 pageLink.href = '#'; pageLink.innerHTML = i; if (i === currentPage) { pageLink.className = 'active'; // 当前页码高亮显示 } pageLink.addEventListener('click', function(e) { e.preventDefault(); currentPage = parseInt(this.innerHTML); showTableRows(); showPagination(); }); pagination.appendChild(pageLink); } table.parentNode.insertBefore(pagination, table.nextSibling); // 将分页容器插入到表格后面 } ``` 5. 调用上述两个函数来显示当前页和分页： ``` showTableRows(); showPagination(); ``` 6. 最后，添加一些 CSS 样式来美化分页： ``` .pagination { margin-top: 10px; } .pagination a { display: inline-block; padding: 5px 10px; margin-right: 5px; border: 1px solid #ccc; border-radius: 3px; text-decoration: none; } .pagination a.active { background-color: #007bff; color: #fff; border-color: #007bff; } ``` 以上就是使用 JavaScript 和 HTML 表格来实现分页的方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值