js实现页面分页效果

最新推荐文章于 2024-07-01 11:34:43 发布

小白银

最新推荐文章于 2024-07-01 11:34:43 发布

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： js

本文链接：https://blog.youkuaiyun.com/mozhu1997/article/details/97258687

js 专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用原生JavaScript实现一个简单的分页功能，包括生成页码、页面切换和响应onchange事件等关键步骤。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近接触老项目，项目要求修改表格添加分页功能，采用的bootstrap-table,在完成项目后，决定原生简单实现一下分页效果。

效果：

首先，分页最重要的几个参数：

每页显示条数：pageSize
总数据量：data;
总共多少页：totalpages= (data-1)/pageSize+1

然后，就是根据总页数生成分页

 var str= '';
for (var i = 1; i <= totalpages; i++) {
           str+='<li>'+i+'</li>'
       }
 bBtn.innerHTML=str;

再就是点击页码的事件：

var aLi = bBtn.getElementsByTagName("li");
        for (var i = 0; i <= totalpages - 1; i++) {
            aLi[i].index = i;
            aLi[0].style.background = "#fff000";
            aLi[i].style.left = i * 40 + "px";
            //点击页码做3件事
            aLi[i].onclick = function() {
                b = this.index;
                // 1.当前页码active（简单功能）
                for (var j = 0; j < aLi.length; j++) {
                    aLi[j].style.background = "#00ff00";
                }
                this.style.background = "#fff000";
                //2.页面切换
                for (var j = 0; j < oLi.length; j++) {//点击第b页，先让 所有页面隐藏
                    oLi[j].style.display = "none";
                }
                var a=0;
                //判断是否为最后一条数据
                b ==(totalpages-1) ?  a=oLi.length :   a=(b+1)*pageSize;
                for (var j = (b * pageSize); j <a; j++) {//每页显示条数：第一条 b * 10条 至 每页最后一条数据()（重难点）
                    oLi[j].style.display = "block";
                }
            }
        }

然后就是监听onchange事件，进行页码之间的切换，附上代码


<style>
ol,ul,li {
    list-style:none;
}
.box {
    width:550px;height:500px;position:relative; margin:20px auto;
}
#conten {
    width:500px;height:410px;   border:1px solid #ccc;overflow:auto; margin: 0 auto;
}
#conten li {
    width:100%;height:40px;border-bottom:1px solid #ff0000;text-align: center;
}
#btn {
    width:180px;height:30px;margin:20px auto;padding:5px 10px;position:relative;
}
#btn  li{
    width:30px; height:30px; background:#00ff00; margin:0 5px;display: inline-block;position:absolute; transition:left 0.5s;text-align:center;
 }
.pageList{
    height: 100px;display: flex;justify-content: space-around;align-items: center;
}
select{
    width: 40px;
}
</style>
</head>
<body>
<div class="box">
    <ul id="conten">//这是要分页的内容</ul>
    <div class="pageList">
        <p>共<span class="pageNumber"></span>条记录</p>
        <p>每页显示<select>
            <option value="5">5</option>
            <option value="10">10</option>
            <option value="15">15</option>
        </select>>条记录</p>
        <ul id="btn"></ul>
    </div> 
</div>
<script>
window.onload = function() {
    var oConten = document.getElementById("conten");
    var oLi = oConten.getElementsByTagName("li");
    var bBtn = document.getElementById("btn");
    var num=document.getElementsByClassName('pageNumber')[0];
    var oSelect=document.getElementsByTagName('select')[0];
    var pageSize=0;
    var str= '';
    oSelect.onchange=function(){
        pageSize=oSelect.value; 
        var totalpages = parseInt((oLi.length-1)/pageSize+1)//页面数量（）
        num.innerHTML=oLi.length;
        num.style.color="#00ff00"
        //添加页码标签（几个页面就添加几个页码）
        for (var i = 1; i <= totalpages; i++) {
           str+='<li>'+i+'</li>'
        }
        bBtn.innerHTML=str;
        str='';
        var aLi = bBtn.getElementsByTagName("li");
        for (var i = 0; i <= totalpages - 1; i++) {
            aLi[i].index = i;
            aLi[0].style.background = "#fff000";
            aLi[i].style.left = i * 40 + "px";
            //点击页码做3件事
            aLi[i].onclick = function() {
                b = this.index;
                // 1.当前页码active（简单功能）
                for (var j = 0; j < aLi.length; j++) {
                    aLi[j].style.background = "#00ff00";
                }
                this.style.background = "#fff000";
                //2.页面切换
                for (var j = 0; j < oLi.length; j++) {//点击第b页，先让 所有页面隐藏
                    oLi[j].style.display = "none";
                }
                var a=0;
                //判断是否为最后一条数据
                b ==(totalpages-1) ?  a=oLi.length :   a=(b+1)*pageSize;
                for (var j = (b * pageSize); j <a; j++) {//每页显示条数：第一条 b * 10条 至 每页最后一条数据()（重难点）
                    oLi[j].style.display = "block";
                }
            }
        }
        aLi[0].onclick(); //切换每页显示条数时默认显示第一个页码
    }
    oSelect.onchange(); //页面加载时，默认触发一次onchange事件
}
</script>