前端实现伪分页

最新推荐文章于 2024-08-01 17:00:44 发布
最新推荐文章于 2024-08-01 17:00:44 发布
阅读量1.8k 收藏 4
点赞数 1
分类专栏： 工作网页特效日常积累 文章标签： 分页 WEB前端 前端 布局 bootstrap
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mr_yanyan/article/details/75108257
版权

有时候，做静态页面的时候，需要用到分页，当然绝绝绝大多数的情况下，分页这个事是后台来做的，用户请求时再给数据，至于两者利弊，稍后再讲。 因此，我们在这里称作它为伪分页。

此分页分为四部分，首先是页面布局，为了简洁布局，直接用了BootStrap中的分页，代码如下

<!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>实现伪分页</title>
</head>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<body>
    <div id="list-icount">
        <!--存放数据的div-->
    </div>
    <ul class="pagination" id="paging">
        <!--存放页数列表ul-->
    </ul>
</body>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>
第二我们暂且用本地数据，也可以请求后台，不过请求后台的话还是用后端做比较合适 

  var data = {
        1: "<p>俺家酒儿清</p>",
        2: "<p>一贯买两瓶</p>",
        3: "<p>灌得肚儿胀</p>",
        4: "<p>自家店小二是也</p>",
        5: "<p>在这岳阳楼下开着一个酒店</p>",
        6: "<p>但是南来北往经商客旅</p>",
        7: "<p>做买做卖</p>",
        8: "<p>都来这楼上饮酒</p>",
        9: "<p>今日早晨间</p>",
        10: "<p>我将这镟锅儿烧的热了</p>",
        11: "<p>将酒望子挑起来</p>",
        12: "<p>招过客，招过客</p>",
        13: "<p>贫道姓吕名岩字洞宾</p>",
        14: "<p>道号纯阳子</p>",
        15: "<p>先为唐朝儒士</p>",
        16: "<p>后遇钟离师父点化</p>",
        17: "<p>得成仙道</p>",
        18: "<p>贫道在蟠桃会上饮宴</p>"
    }
第三我们绑定数据及加载数据 
    function turnJson(oJsonArr, oJsonArrValue) {
        var iCount = 0;
        var turn_json_arr = [];
        if (arguments.length == 1) {
            for (key in oJsonArr) {
                turn_json_arr.push(key);
                //一个值时是将json的key转化成数组
            }
        } else {
            for (key in oJsonArr) {
                turn_json_arr.push(oJsonArr[key]);
            };
        }
        return turn_json_arr;
    }
    var iPageCount,
        iPageList = 6,
        sLi = '',
        k = 0,
        oPaging = document.getElementById('paging'), //获取ul  ID
        oList_icount = document.getElementById('list-icount'); //获取数据列表ID
    var dataArr = turnJson(data, 'newsList'); //将对象中的键值转换为数组
    iPageCount = Math.ceil(dataArr.length / iPageList); //将页数进行向上取整
    for (var i = 0; i < iPageCount; i++) {
        sLi += '<li class="page-footer"><a href="javascript:;">' + (i + 1) + '</a></li>'; //动态创建页数
    }
    // 将前一页和后一页标签加上
    oPaging.innerHTML = '<li id="prePage"><a href="javascript:;">«</a></li>' + sLi +
        '<li id="nextPage"><a href="javascript:;">»</a></li>';
    // 对控制数据的显隐和绑定数据
    while (k < dataArr.length) {
        switch (true) {
            case k <= 5:
                if (k == 0) {
                    var wraperP_1 = document.createElement('div')
                }
                wraperP_1.innerHTML += dataArr[k];
                if (k == 5) {
                    wraperP_1.className = 'ShowPara';
                    wraperP_1.style.display = 'block';
                    oList_icount.appendChild(wraperP_1)
                }
                break;
            case k > 5 && k <= 11:
                if (k == 6) {
                    var wraperP_2 = document.createElement('div')
                }
                wraperP_2.innerHTML += dataArr[k];
                if (k == 11) {
                    wraperP_2.className = 'ShowPara';
                    wraperP_2.style.display = 'none';
                    oList_icount.appendChild(wraperP_2)
                }
                break;
            case k > 11 && k <= 17:
                if (k == 12) {
                    var wraperP_3 = document.createElement('div')
                }
                wraperP_3.innerHTML += dataArr[k];
                if (k == 17) {
                    wraperP_3.className = 'ShowPara';
                    wraperP_3.style.display = 'none';
                    oList_icount.appendChild(wraperP_3)
                }
                break;
            case k > 17 && k <= dataArr.length - 1:
                if (k == 18) {
                    var wraperP_4 = document.createElement('div')
                }
                wraperP_4.innerHTML += dataArr[k];
                if (k == dataArr.length - 1) {
                    wraperP_4.className = 'ShowPara';
                    wraperP_4.style.display = 'none';
                    oList_icount.appendChild(wraperP_4)
                }
                break;
            default:
                break
        }
        k++
    }
第四，对元素对象进行事件操作 

    iPage_footer = document.getElementsByClassName('page-footer').length,
        oShowPara = document.getElementsByClassName('ShowPara'),
        iShowPara = document.getElementsByClassName('ShowPara').length;
    document.getElementsByClassName('page-footer')[0].classList.add('active');
    // 为每一个页数增加点击事件，设置active类
    for (var i = 0; i < iPage_footer; i++) {
        oPage_footer[i].index = i;
        oPage_footer[i].onclick = function () {
            for (var j = 0; j < iPage_footer; j++) {
                oShowPara[j].style.display = 'none';
                oPage_footer[j].className = 'page-footer'
            }
            oShowPara[this.index].style.display = 'block';
            this.className = 'page-footer active'
        }
    };
    var oPre = document.getElementById('prePage');
    var oNext = document.getElementById('nextPage');
    // 控制列表的显隐
    function circleList() {
        for (var j = 0; j < iPage_footer; j++) {
            oShowPara[j].style.display = 'none';
            oPage_footer[j].className = 'page-footer'
        }
    }
    //进行下一页的切换
    function nextPage() {
        for (var i = 0; i < iPage_footer; i++) {
            if (oShowPara[i].style.display == 'block') {
                if (i == iPage_footer - 1) return;
                circleList();
                oShowPara[(i + 1)].style.display = 'block';
                oPage_footer[(i + 1)].className = 'page-footer active';
                return
            }
        }
    };
    //进行上一页切换
    function prePage() {
        for (var i = 0; i < iPage_footer; i++) {
            if (oShowPara[i].style.display == 'block') {
                if (i == 0) return;
                circleList();
                oShowPara[(i - 1)].style.display = 'block';
                oPage_footer[(i - 1)].className = 'page-footer active';
                return
            }
        }
    };

    oPre.onclick = prePage;
    oNext.onclick = nextPage;
最后整个代码如下 

<!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>实现伪分页</title>
</head>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<body>
    <div id="list-icount">
        <!--存放数据的div-->
    </div>
    <ul class="pagination" id="paging">
        <!--存放页数列表ul-->
    </ul>
</body>
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    var data = {
        1: "<p>俺家酒儿清</p>",
        2: "<p>一贯买两瓶</p>",
        3: "<p>灌得肚儿胀</p>",
        4: "<p>自家店小二是也</p>",
        5: "<p>在这岳阳楼下开着一个酒店</p>",
        6: "<p>但是南来北往经商客旅</p>",
        7: "<p>做买做卖</p>",
        8: "<p>都来这楼上饮酒</p>",
        9: "<p>今日早晨间</p>",
        10: "<p>我将这镟锅儿烧的热了</p>",
        11: "<p>将酒望子挑起来</p>",
        12: "<p>招过客，招过客</p>",
        13: "<p>贫道姓吕名岩字洞宾</p>",
        14: "<p>道号纯阳子</p>",
        15: "<p>先为唐朝儒士</p>",
        16: "<p>后遇钟离师父点化</p>",
        17: "<p>得成仙道</p>",
        18: "<p>贫道在蟠桃会上饮宴</p>"
    }
    //将json中的key或键值转化为数组
    function turnJson(oJsonArr, oJsonArrValue) {
        var iCount = 0;
        var turn_json_arr = [];
        if (arguments.length == 1) {
            for (key in oJsonArr) {
                turn_json_arr.push(key);
                //一个值时是将json的key转化成数组
            }
        } else {
            for (key in oJsonArr) {
                turn_json_arr.push(oJsonArr[key]);
            };
        }
        return turn_json_arr;
    }
    var iPageCount,
        iPageList = 6,
        sLi = '',
        k = 0,
        oPaging = document.getElementById('paging'), //获取ul  ID
        oList_icount = document.getElementById('list-icount'); //获取数据列表ID
    var dataArr = turnJson(data, 'newsList'); //将对象中的键值转换为数组
    iPageCount = Math.ceil(dataArr.length / iPageList); //将页数进行向上取整
    for (var i = 0; i < iPageCount; i++) {
        sLi += '<li class="page-footer"><a href="javascript:;">' + (i + 1) + '</a></li>'; //动态创建页数
    }
    // 将前一页和后一页标签加上
    oPaging.innerHTML = '<li id="prePage"><a href="javascript:;">«</a></li>' + sLi +
        '<li id="nextPage"><a href="javascript:;">»</a></li>';
    // 对控制数据的显隐和绑定数据
    while (k < dataArr.length) {
        switch (true) {
            case k <= 5:
                if (k == 0) {
                    var wraperP_1 = document.createElement('div')
                }
                wraperP_1.innerHTML += dataArr[k];
                if (k == 5) {
                    wraperP_1.className = 'ShowPara';
                    wraperP_1.style.display = 'block';
                    oList_icount.appendChild(wraperP_1)
                }
                break;
            case k > 5 && k <= 11:
                if (k == 6) {
                    var wraperP_2 = document.createElement('div')
                }
                wraperP_2.innerHTML += dataArr[k];
                if (k == 11) {
                    wraperP_2.className = 'ShowPara';
                    wraperP_2.style.display = 'none';
                    oList_icount.appendChild(wraperP_2)
                }
                break;
            case k > 11 && k <= 17:
                if (k == 12) {
                    var wraperP_3 = document.createElement('div')
                }
                wraperP_3.innerHTML += dataArr[k];
                if (k == 17) {
                    wraperP_3.className = 'ShowPara';
                    wraperP_3.style.display = 'none';
                    oList_icount.appendChild(wraperP_3)
                }
                break;
            case k > 17 && k <= dataArr.length - 1:
                if (k == 18) {
                    var wraperP_4 = document.createElement('div')
                }
                wraperP_4.innerHTML += dataArr[k];
                if (k == dataArr.length - 1) {
                    wraperP_4.className = 'ShowPara';
                    wraperP_4.style.display = 'none';
                    oList_icount.appendChild(wraperP_4)
                }
                break;
            default:
                break
        }
        k++
    }
    var oPage_footer = document.getElementsByClassName('page-footer'),
        iPage_footer = document.getElementsByClassName('page-footer').length,
        oShowPara = document.getElementsByClassName('ShowPara'),
        iShowPara = document.getElementsByClassName('ShowPara').length;
    document.getElementsByClassName('page-footer')[0].classList.add('active');
    // 为每一个页数增加点击事件，设置active类
    for (var i = 0; i < iPage_footer; i++) {
        oPage_footer[i].index = i;
        oPage_footer[i].onclick = function () {
            for (var j = 0; j < iPage_footer; j++) {
                oShowPara[j].style.display = 'none';
                oPage_footer[j].className = 'page-footer'
            }
            oShowPara[this.index].style.display = 'block';
            this.className = 'page-footer active'
        }
    };
    var oPre = document.getElementById('prePage');
    var oNext = document.getElementById('nextPage');
    // 控制列表的显隐
    function circleList() {
        for (var j = 0; j < iPage_footer; j++) {
            oShowPara[j].style.display = 'none';
            oPage_footer[j].className = 'page-footer'
        }
    }
    //进行下一页的切换
    function nextPage() {
        for (var i = 0; i < iPage_footer; i++) {
            if (oShowPara[i].style.display == 'block') {
                if (i == iPage_footer - 1) return;
                circleList();
                oShowPara[(i + 1)].style.display = 'block';
                oPage_footer[(i + 1)].className = 'page-footer active';
                return
            }
        }
    };
    //进行上一页切换
    function prePage() {
        for (var i = 0; i < iPage_footer; i++) {
            if (oShowPara[i].style.display == 'block') {
                if (i == 0) return;
                circleList();
                oShowPara[(i - 1)].style.display = 'block';
                oPage_footer[(i - 1)].className = 'page-footer active';
                return
            }
        }
    };

    oPre.onclick = prePage;
    oNext.onclick = nextPage;
</script>

</html>
前台分页的特点为：下载量大，显示慢，加载时用户体验不好。服务器压力请求少，换页时用户体验好。如果有即时性内容，就不能翻回来的时候更新了。

后台分页的特点为：和前台分页特点相反。

总的来说，个人认为，前台分页更适合那些请求数据较少的，静态页面的数据。

另外，感觉自己写的代码好臃肿，请大佬们不吝赐教，溜了溜了~~




乐橙Web
关注
专栏目录
html一个页面分页代码怎么写,纯JS前端实现分页代码
weixin_36221948的博客
06-04 2327
先给大家展示下效果图，如果大家感觉效果不错，请参考实现代码：因为这是我自己第一次动手用js写分页，写的应该也不是很完美，有些公共的没有抽取出来，但是用起来还是可以的，这块代码是可以把它当做公共的分页去处理的，我就是用这块代码写了两个稍微不同一些的分页！公共的代码抽取的也差不多，主要就是ajax后台以及返回的值不同而已，只要把总页码的值获取到，点击首页/下一页等传值正确的话，基本上分页是不会出什么问...
前端样式 分页中间是省略号
09-13
在前端开发中，分页设计是一项常见的任务，用于在大量数据中提供良好的用户体验，让用户能够按需加载或浏览内容。"前端样式 分页中间是省略号"这个标题表明我们讨论的是一个关于分页组件的设计，其中在分页条目之间...
JQuery实现的前台假分页
10-16
JQuery实现的前台数据分页显示，该分页为假分页，是一次性传入在前台需要展示的数据，然后进行分页显示。不是在后台对数据进行分页获取。
前端假分页
qq_45505241的博客
04-29 250
this.list.filter((v ,i) => (i < (this.page.pageNo) * this.page.pageSize) && (i >= (this.page.pageNo-1) * this.page.pageSize));
前端（Vue）实现自行分页的两种方法（记录一下）
最新发布
飞翔༒之翼
08-01 382
【代码】前端（Vue）实现自行分页的两种方法（记录一下）
假分页的前端实现（html+bootstrap+js）
HYeeee的博客
04-28 3559
一、开始 今天弄了一天的分页，总结一下今天的工作。 找了一下真假分页的区别： 所谓的“真分页”与“假分页”，前者是在后台的时候就将数据给分好，前台显示，每一次的点击“前一页”、“下一页”就向后台发送一次请求。 而后者便是后台将全部数据发送给前台，将数据绑定在控件上，利用jquery逻辑控制视图的渲染,控制数据的显隐来实现视觉上的分页效果。 “真分页”显然是效率更高，面对庞大的数据量也能够从...
前端假分页前端假分页前端假分页
cainiaoyaya的博客
06-02 64
【代码】前端假分页。
vue前端假分页
weixin_45852743的博客
10-25 527
前端假分页是因为有时候后端接口不太方便提供分页功能，而前端需要展示大量数据时，为了提高用户体验，需要将数据分页展示。在这种情况下，前端可以通过自己实现一个假的分页效果来达到分页展示数据的目的。假分页的实现方式是在前端将所有数据加载到页面中，然后通过JavaScript代码实现分页效果，即根据用户的点击或滚动等操作，动态地展示不同页码的数据。这种方式虽然不能真正地减少数据的加载量，但可以提高用户的交互体验，让用户更加方便地查看和操作数据。
JS实现php的伪分页
10-30
#### 二、JavaScript实现伪分页的方法 1. **设置分页参数**： - `total`：代表数据的总条目数，用于计算分页总数。 - `pagesize`：每一页显示的数据条目数，决定每页的数据量。 2. **生成分页导航**： - 使用...
js jquery实现table假分页
08-09
假分页，又称为模拟分页，是通过前端技术实现的一种分页效果，它并不涉及服务器端的数据分块，而是通过计算和显示有限的数据集来营造分页的感觉。 这篇博客的标题和描述指向了一个使用jQuery来实现表格假分页的实践...
CSS3实现3D分页导航按钮特效代码
03-20
"CSS3实现3D分页导航按钮特效代码"正是利用这些特性来创建出独特且吸引人的用户体验。这篇内容将深入探讨如何使用CSS3来构建这种3D分页导航，以及涉及到的关键技术和方法。 首先，3D转换是CSS3中的一个核心特性，它...
页面列表实现假分页
08-30
框架使用Struts2+Hibernate实现页面列表的假分页
java分页之假分页实现简单的分页器
09-02
主要介绍了java分页之假分页实现简单的分页器的相关资料,需要的朋友可以参考下
easyUI datagrid 前端假分页
weixin_34212189的博客
01-26 182
datagrid有两种分页方式，真分页和假分页。所谓真分页，就是真的每次只获取一张分页的数据。所谓假分页，就是将所有数据全部获取下来，然后利用其分页控件进行分页。下面具体说说假分页：1、datagrid有些参数需要设置：$("#dg").datagrid({ pageNumber:1, pagination: true,//分页控件 rownumbers: true,...
前端JQ实现伪分页
weixin_33969116的博客
05-07 184
毕设的使用ssm+maven来写的，有个分页的需求，由于仅仅是毕设，涉及到的数据量不大，为了多个分页的功能（说不定就因为这个功能加分呢。。。），但又不想去动sql，写limit，于是灵机一动，先把数据取到前端，利用append来动态渲染页面，实现一个伪分页的效果岂不是妙哉，话不多说，上代码： <!DOCTYPE html> &...
vue前端实现的假分页
m0_61476911的博客
12-13 1351
前端实现假分页
基于jquery 的分页插件，前端实现假分页效果
weixin_30747253的博客
04-19 175
上次分享了一款jquery插件，现在依旧分享这个插件，不过上一次分享主要是用于regular框件，且每一页数据都是从后端获取过来的，这一次的分享主要是讲一次性获取完数据 然后手动进行分页。此需求基本上是和前端搜索挂钩的。所有的数据都在页面里只是展示的不同。这样前端搜索就能从全部数据中进行搜索，而不是尴尬的只能从某一页里进行搜索，不过这种需求一般都在数据量较小的情况下才会使用，毕竟搜索功能...
前端假分页js一个函数搞定
白白的博客
12-19 862
pageTotal数组长度 // pageSize每页显示 10 条 this.pageNum第几页 paginationChange分页函数，所有数据在list中，pageData是分页数组，currentPageData是页面展示数据pageData[this.pageNum-1] 分页函数和改变页数和size函数 更新数据和改变size时调用分页函数，改变页数时只改变当前页面数据值 // 分页查询 // pageTotal数组长度 // pageSize每页显示 10 条 pa.
vue elementui表格前端分页
06-06
Vue ElementUI提供了非常方便的表格组件，同时也支持前端分页功能。以下是一个简单的示例代码，演示如何在Vue ElementUI中实现前端分页： ```vue <template> <div> <el-table :data="tableData" :page-size="pageSize" :current-page="currentPage" :total="total" @current-change="handleCurrentChange"> <el-table-column prop="name" label="Name"></el-table-column> <el-table-column prop="age" label="Age"></el-table-column> <el-table-column prop="gender" label="Gender"></el-table-column> </el-table> </div> </template> <script> export default { data() { return { tableData: [], // 表格数据 pageSize: 10, // 每页显示条数 currentPage: 1, // 当前页数 total: 0 // 总条数 }; }, mounted() { // 初始化数据 this.getTableData(); }, methods: { getTableData() { // 发送请求获取数据，这里使用假数据 const data = [ { name: "Alice", age: 18, gender: "female" }, { name: "Bob", age: 20, gender: "male" }, { name: "Charlie", age: 22, gender: "male" }, { name: "David", age: 24, gender: "male" }, { name: "Emily", age: 26, gender: "female" }, { name: "Frank", age: 28, gender: "male" }, { name: "Grace", age: 30, gender: "female" }, { name: "Henry", age: 32, gender: "male" }, { name: "Iris", age: 34, gender: "female" }, { name: "Jack", age: 36, gender: "male" }, { name: "Kate", age: 38, gender: "female" }, { name: "Leo", age: 40, gender: "male" } ]; // 设置总条数 this.total = data.length; // 计算起始索引和终止索引 const startIndex = (this.currentPage - 1) * this.pageSize; const endIndex = startIndex + this.pageSize; // 获取当前页的数据 this.tableData = data.slice(startIndex, endIndex); }, handleCurrentChange(currentPage) { // 当前页数发生变化时重新获取数据 this.currentPage = currentPage; this.getTableData(); } } }; </script> ``` 在上述代码中，我们使用了Vue ElementUI的el-table组件来展示表格数据，通过设置pageSize和currentPage属性来控制每页显示条数和当前页数，使用@current-change事件来监听当前页数的变化，然后再通过计算得到当前页的数据，最后渲染到表格中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值