js实现页面分页效果

谁借莪１个温暖的怀抱￠ 2021-11-23 00:42 531阅读 0赞

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

效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vemh1MTk5Nw_size_16_color_FFFFFF_t_70][]

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

1.  每页显示条数：pageSize
2.  总数据量：data;                                                 
3.  总共多少页：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>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21vemh1MTk5Nw_size_16_color_FFFFFF_t_70]: /images/20211122/0821129f1d324c84bf36beee41b922b1.png

发表评论取消回复

表情：

评论列表（有 0 条评论，531人围观）

还没有评论，来说两句吧...

相关阅读

相关前端实现分页效果

前言在实际开发中，大部分分页都是配合后端完成的。但是，有时候并不是这样，并非不是这样。后端会一次性返回所有的数据，而我们前端不可能展示所有数据，而是弄一个分页效果。还有

末蓝、/ 2023年10月13日 10:09/ 0 赞/ 44 阅读

相关 JS之页面实现多个分页

准备如下：去jquery官网下载jquery.js。效果如下： ![图片][20170207165854928] <!DOCTYPE html

桃扇骨/ 2022年07月12日 02:25/ 0 赞/ 257 阅读

相关 JS之页面实现多个分页

准备如下：去jquery官网下载jquery.js。效果如下： ![图片][20170207165854928] <!DOCTYPE html

古城微笑少年丶/ 2022年07月12日 02:25/ 0 赞/ 277 阅读

相关 js框架jquery实现分页效果代码下载

原文：[js框架jquery实现分页效果代码下载][js_jquery] 源代码下载地址： [http://www.zuidaima.com/share/1896994925

╰+哭是因爲堅強的太久メ/ 2022年07月11日 16:05/ 0 赞/ 172 阅读

相关原生js实现分页的效果

想必大家都用过百度查找过我们想要的信息，每次我们查找东西的时候，百度都会返给我们很多很多相似和有关的结果，而这些结果是不可能一页就显示完全的，一般都会分很多很多页，效果图如下。

朱雀/ 2022年05月29日 05:55/ 0 赞/ 312 阅读

相关 PHP实现分页效果1

Talk is cheap,show the code like this.少废话，放码过来。 1.连接Mysql服务器，选择数据库，设定字符集; <?php

青旅半醒/ 2022年05月20日 07:40/ 0 赞/ 284 阅读

相关 Java-页面分页效果

分页模板 1、首先建立一个工具包msq.utils 新建两个类 NavigationTag.java package msq.utils

水深无声/ 2022年01月21日 02:15/ 0 赞/ 427 阅读

相关 js实现页面分页效果

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

谁借莪１个温暖的怀抱￠/ 2021年11月23日 00:42/ 0 赞/ 532 阅读

相关 PHP+MYSQL实现分页效果

实现原理第三大步第一步：传入页码第二步：根据页码取出数据第三步：显示数据+分页条第一步传入页码：$page = $\_GET\['p'\]; 这一步传入的页

喜欢ヅ旅行/ 2021年09月16日 01:32/ 0 赞/ 482 阅读

相关 angular+pagination实现分页效果

angular+pagination实现分页效果

朱雀/ 2020年11月13日 19:17/ 0 赞/ 970 阅读