js分页

最新推荐文章于 2024-03-19 05:05:30 发布
最新推荐文章于 2024-03-19 05:05:30 发布
阅读量1.4k 收藏 7
点赞数
分类专栏： js 文章标签： js  分页
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35176916/article/details/84790171
版权

方法一

一： 先看效果图
在这里插入图片描述

二：主要功能：
上一页，下一页，跳转，尾页，

三： 代码

index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #box div{
    float: left; margin: 10px;
    -moz-user-select: none; /*火狐*/
    -webkit-user-select: none; /*webkit浏览器*/
    -ms-user-select: none; /*IE10*/
    -khtml-user-select: none; /*早期浏览器*/
    user-select: none;
    }
    #box::after{
        content:''; overflow: hidden; clear:both;height: 0; display: block; zoom: 1;
    }
    #box .jump input{ width: 30px; margin-right: 10px;}
    #box .pages span{     
    display: inline-block;
    cursor: pointer;
    width: 20px;
    height: 20px;
    border: 1px solid balck;
    margin: 0 5px;
    border: 1px solid black;
    text-align: center; 
    }
    .firstpage,.lastpage,.prepage,.nextpage,.btn{cursor: pointer;}
    </style>
</head>
<body>
    <div id="box">
        <div class="firstpage">首页</div><div class="prepage">上一页</div><div class="pages"></div>
        <div class="nextpage">下一页</div><div class="lastpage">尾页</div><div class="jump"><input type="text"><button class="btn">跳转</button></div>
    </div>
    <script src="./jquery.min.js"></script>
    <script src="./page.js"></script>
</body>
</html>

js:

var page = {
    init: function(){
        this.goPage(7,4,5,200)
    },
    /**
     * 
     * @param {当前页} cur 
     * @param {一页显示的数量} onepage 
     * @param {页码显示范围} range 
     * @param {数据总量} total 
     */
    goPage:function(cur,onepage,range,total){
        var dest= $('.pages');
        var _this=this;
        var totalPage = Math.ceil(total/onepage); //总页码数
         var tempStr='';
         var currentPage = cur;
         //根据页码范围控制页码显示
            tempStr = _this.createTemplete(totalPage,range,currentPage);

           dest.html();
           dest.html(tempStr);  
           $("#box span:contains("+currentPage+")").css({'background':'red'}).siblings().css({'background':'none'})
            //上一页事件 
            $('.prepage').on('click',function(){
                 if(currentPage>1){
                    currentPage-=1;
                tempStr = _this.createTemplete(totalPage,range,currentPage);
                dest.html();
                dest.html(tempStr); 
                $("#box span:contains("+currentPage+")").css({'background':'red'}).siblings().css({'background':'none'})
                 }
            });
            //下一页事件
            $('.nextpage').on('click',function(){
                currentPage+=1
                if(currentPage<totalPage){
                    tempStr = _this.createTemplete(totalPage,range,currentPage);
                    dest.html();
                    dest.html(tempStr); 
                    $("#box span:contains("+currentPage+")").css({'background':'red'}).siblings().css({'background':'none'})
                }else{
                    return false
                }
            });
          //首页
          $('.firstpage').on('click',function(){
              currentPage=1;
            _this.goPage(1,onepage,range,total)
            $("#box span:contains("+currentPage+")").css({'background':'red'}).siblings().css({'background':'none'})
          })
          //尾页
          $('.lastpage').on('click',function(){
              currentPage=totalPage;
            _this.goPage(totalPage,onepage,range,total)
            $("#box span:contains("+currentPage+")").css({'background':'red'}).siblings().css({'background':'none'})
          }) 
          //跳转
          $('.btn').on('click',function(){
              currentPage = parseInt($('#box input').val());
              console.log(currentPage)
              tempStr = _this.createTemplete(totalPage,range,currentPage);
              dest.html();
              dest.html(tempStr); 
              $("#box span:contains("+currentPage+")").css({'background':'red'}).siblings().css({'background':'none'})
          })
          //页码
          $('.pages').on('click','span',function(){
              currentPage=parseInt($(this).text())
              console.log(this)
              tempStr = _this.createTemplete(totalPage,range,currentPage);
              dest.html();
              dest.html(tempStr); 
              $("#box span:contains("+currentPage+")").css({'background':'red'}).siblings().css({'background':'none'})
          })
    },
    createTemplete: function(total,range,currentPage){
        var tempStr='';
        if(total<=range){
            for(var pageIndex= 1;pageIndex<total+1;pageIndex++){
                tempStr+="<span>"+pageIndex+"</span>";
                
             }
            }else{
                    if(currentPage>=total-range){
                        var startPage = total-range;
                        for(var i=startPage; i<=total;i++){
                            tempStr+="<span>"+i+"</span>" 
                    }
                    }else{
                        var startPage=currentPage;
                        for(var i =startPage;i<=startPage+range;i++){
                        tempStr += "<span>"+i+"</span>"
                    }
                    }
                } 
                return tempStr;
    },
}
$(function(){
    page.init();
})

总结：函数还可以进一步优化，所有的按钮都是事先写好的，还可以用一下方式来做分页。

方法二：

说明： 第二种参考了网上的代码 参考地址，增加了页码显示范围，该方法按钮是动态生成的。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
        <table id="idData" width="70%">
          <tr><td>user1</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user2</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user3</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user4</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user5</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user6</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user7</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user8</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user9</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user10</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user11</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user12</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user13</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user14</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user15</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user16</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user17</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user18</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user19</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user20</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user21</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user22</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user23</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user24</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user25</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user26</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user27</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user28</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user29</td><td>25</td><td>男</td><td>山西吕梁</td></tr>
          <tr><td>user30</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 src="./jquery.min.js"></script>
   <script>
    
        function goPage(pno){
    var itable = document.getElementById("idData");
    var num = itable.rows.length;//表格所有行数(所有记录数)
    var totalPage = 0;//总页数
    var pageSize = 4;//每页显示行数
    var range=20; //页码显示范围
    //总共分几页
    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
    
    //遍历显示数据实现分页
    for(var i=1;i<(num+1);i++){
        var irow = itable.rows[i-1];
        if(i>=startRow && i<=endRow){
            irow.style.display = "table-row";
        }else{
            irow.style.display = "none";
        }
    }
    var tempStr = "<span>共"+totalPage+"页</span>";
 
    if(currentPage>1){
        tempStr += "<span class='btn' href=\"#\" onClick=\"goPage("+(1)+")\">首页</span>";
        tempStr += "<span class='btn' href=\"#\" onClick=\"goPage("+(currentPage-1)+")\">上一页</span>"
    }else{
        tempStr += "<span class='btn'>首页</span>";
        tempStr += "<span class='btn'>上一页</span>";
    }
    //根据页码范围来动态控制页码
    if(totalPage<=range){
    for(var pageIndex= 1;pageIndex<totalPage+1;pageIndex++){
        tempStr += "<a onclick=\"goPage("+pageIndex+")\"><span>"+ pageIndex +"</span></a>";
     }
    }else{
              if(currentPage>=totalPage-range){
                  var startPage = totalPage-range;
                  for(var i=startPage; i<=totalPage;i++){
                    tempStr += "<a onclick=\"goPage("+i+")\"><span>"+ i +"</span></a>";

                }
              }else{
                  var startPage=currentPage;
                  for(var i =startPage;i<=startPage+range;i++){
                    tempStr += "<a onclick=\"goPage("+i+")\"><span>"+ i +"</span></a>";
                }
              }
          }
    if(currentPage<totalPage){
        tempStr += "<span class='btn' href=\"#\" onClick=\"goPage("+(currentPage+1)+")\">下一页</span>";
       
        tempStr += "<span class='btn' href=\"#\" onClick=\"goPage("+(totalPage)+")\">尾页</span>";
    }else{
        tempStr += "<span class='btn'>下一页</span>";
        tempStr += "<span class='btn'>尾页</span>";
    }
    document.getElementById("barcon").innerHTML = tempStr;
   
}
goPage(1);
    
   </script>
</body>
</html>
yaxi_yaxi_yaxi
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript分页代码实例分享(js分页)
10-26
主要介绍了javascript分页实例，大家参考使用吧
JavaScript经典实例之分页（简单易用）原生js封装分页（一次性数据）
编程界明世隐的博客
12-17 2366
<!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 分页 方法一 【实用】
刘贵庆的博客
08-19 7804
纯js 分页功能。
JavaScript经典实例之分页（简单易用）原生js封装分页
最新发布
m0_61408947的博客
03-19 1004
/每次选择要重新处理按钮//响应点击事件//首页是否有效}else{//前一页按钮是否有效}else{//nav_rela}else{}else{//右边隐藏节点数//选择当前页i++){if(i==curPage){//选择当前页}else{if(leftCount
JS实现分页功能
大数据同盟会的博客
07-03 9967
JS实现分页功能
javascript 实现分页
weixin_35755188的博客
02-13 1933
JavaScript 实现分页可以使用以下步骤： 计算出需要分页的数据总量和每页显示的数据数量。 根据总数据量和每页数据量计算出需要的总页数。 根据当前页码计算出该页的数据在总数据中的起始位置和结束位置。 根据起始位置和结束位置截取出当前页的数据。 在界面上显示当前页的数据，并提供页码控制功能，使用户可以在不同的页码间切换。 以下是一个简单的 JavaScript 代码示例： ```...
js 分页功能实现
m0_72759446的博客
05-12 749
当表单数据过多时，查看起来比较不方便吗，这个时候就需要分页查看。
js分页效果
09-22
此示例实现的效果是分页，采用原生JavaScript实现的js分页效果+图片运动效果，希望和大家一起学习交流，有指教的地方请留言给我，谢谢。
js 分页
11-21
js 分页,只需要简单配置就可以用.js 分页,只需要简单配置就可以用.js 分页,只需要简单配置就可以用.js 分页,只需要简单配置就可以用.
最原始js分页
06-21
最原始js分页，不用任何插件，适合初学者参考学习使用
纯JS前端分页组件
Xg_95303084的博客
02-04 335
分页组件
js分页组件Pagination
weixin_45946494的博客
06-15 2136
js分页组件Pagination 文章目录js分页组件Pagination1. 使用配置2. 使用实例3. js源码4. css样式 仿造element-ui使用纯js制作的分页组件，不依赖其他库，可复制粘贴使用，源码仓库地址 1. 使用配置 interface PaginationConfig { // 父容器元素或者选择器 pNode: String | HTMLElement, // 页数 pageSize: Number, // 当前页 pageNum: Number,
JS动态生成分页组件 | 通过按键实现移动控制
qq_54797114的博客
11-24 454
有以下和：HTML结构 CSS样式 案例需求 界面中存在的，系统会随机实例化各种实例，按照如下要求补充完成函数。最多连续显示5页，居中高亮显示页（如所示)： 时，隐藏该组件（如所示）：如果，则显示全部页数，隐藏“首页”和“末页”元素（如所示）：当居中不足5页，向后(前)补足5页，隐藏“首页”(“末页”)元素(如和所示)：、均为正整数，上面效果演示是 执行后的结果 这个案例中是一个构造函数，需要通过操作符调用，需要注意的是内的方法（如方法）需要先挂载到上（）才能被中的其它成员访问（通过访问）知识点：有以下和
js实现分页
w5206666的博客
04-08 3897
js实现分页 方式一： 1、html页面 <!-- 下面要展示的代码 --> <div id="commentDiv"> <div> {% for comment in comment_list %} <div class="col-12 list row"> <div class="col-2 icon"> <img src="/avatar/{
原生JS封装分页器组件
weixin_56383764的博客
11-23 599
原生JS封装分页器
【javascript】js分页控件
weixin_30488313的博客
11-21 133
1 var modelPage={//分页控件 2 //调用示例 3 codeExp: function () { 4 modelPage.initPage({ 5 pagerowcount: 215,//数据总共多少条 6 pag...
html按照字数分页,纯javascript实现分页(两种方法)
weixin_30843553的博客
05-31 541
先给大家贴效果图：网上确实有很多分页的插件以及开源代码，单本是一个后台开发猿，前台css等样式还驾驭不住，所以就开始自己去写了。其实这个分页原理很简单，就是用ajax往后台传值(当前页码)，后台使用limit进行分页。因为这是我自己第一次动手用js写分页，写的应该也不是很完美，有些公共的没有抽取出来，但是用起来还是可以的，这块代码是可以把它当做公共的分页去处理的，我就是用这块代码写了两个稍微不同一...
js 简单的分页函数
josiecici的博客
09-02 554
分页代码：代码解释： /* list：数据 currentPage ：当前页 pageSize：每页条数 list.length：数据总长度 listPage(list)：函数执行后的结果 */ 当list的长度小于10条的时候：取当前的list，为了好看效果直接把10条每页写进去了。 当list的长度大于10条的时候： 例如取第一页的10条数据： listPage(list,currentPage,pageSize) { if (list.length > 10) {
node.js 分页
09-02
在 Node.js 中实现分页功能可以使用不同的方法，以下是一种常见的实现方式： 首先，你需要确定每页要显示的数据数量以及当前页码。假设每页显示10条数据，当前页码为1。 接下来，你可以通过查询数据库或其他数据源...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值