两种方式实现数据分页

最新推荐文章于 2024-06-30 19:40:55 发布
最新推荐文章于 2024-06-30 19:40:55 发布
阅读量341 收藏
点赞数
文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Null_Robot/article/details/107318756
版权

1.话不多说，直接看代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数据分页算法</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            height: 100px;
            border-bottom: 1px solid #000;
        }
        .menu {
            display: inline-block;
        }
        button {
            display: inline-block;
            height: 30px;
            width: 70px;
            line-height: 30px;
            cursor: pointer;
        }
        .menu li {
            list-style: none;
            width: 30px;
            height: 30px;
            border: 1px solid#000;
            display: inline-block;
            text-align: center;
            line-height: 30px;
            cursor: pointer;
        }
        .check {
            background-color: #999;
            color: #000;
        }
    </style>
</head>
<body>
    <div class="box">
        <button class="leftbtn">上一页</button>
        <ul class="menu">
            <li class="check">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>
        </ul>
        <button class="rightbtn">下一页</button>
        <script>
            /*
             * 基本的分页
             * */
            var totleNum = 245;//数据总条数
            var totlePage = 0;//总共多少页
            var nowPage = 0;//当前页
            var pageNum = 10;//一页显示多少条数据
            var eleindex = 0;//记录当前元素的索引

            var save = null;//记录当前谁变色
            totlePage = Math.ceil(totleNum / pageNum);//使用向上取整的方法

            var leftbtn = document.querySelector(".leftbtn");
            var rightbtn = document.querySelector(".rightbtn");
            var list_li = document.querySelector(".menu").children;

            save = list_li[0];
            //上一页
            leftbtn.onclick = function () {
                eleindex--;
                if (eleindex < 0) {
                    eleindex = 0;
                    return;
                }
                changePage(list_li[eleindex]);

                nowPage = list_li[eleindex].innerText;
                if (list_li[eleindex].innerText >= 6 && list_li[0].innerText != 1 && parseInt(nowPage) + 4 < totlePage) {
                    changePageNum("up");
                }
                ;
                console.log(nowPage);
            }
            //下一页
            rightbtn.onclick = function () {
                eleindex++;
                if (eleindex > list_li.length - 1) {
                    eleindex = list_li.length - 1;
                    return;
                }
                changePage(list_li[eleindex]);
                nowPage = list_li[eleindex].innerText;
                if (list_li[eleindex].innerText >= 7 && list_li[list_li.length - 1].innerText != totlePage) {
                    changePageNum("down");
                }

                console.log(nowPage);
            }
            for (var i = 0; i < list_li.length; i++) {
                list_li[i].index = i;
                list_li[i].onclick = function () {
                    changePage(this);
                    eleindex = this.index;

                    var cknum = parseInt(list_li[eleindex].innerText);
                    if (cknum + 4 < totlePage && cknum - 5 >= 1) {
                        var start = cknum - 5;
                        for (var k = 0; k < list_li.length; k++) {
                            list_li[k].innerText = start + k;
                        }
                        eleindex = 5;
                        changePage(list_li[eleindex]);
                    }
                    if (cknum - 5 < 1) {
                        for (var k = 0; k < list_li.length; k++) {
                            list_li[k].innerText = k + 1;
                            if (list_li[k].innerText == cknum) {
                                changePage(list_li[k]);
                                eleindex = k;
                            }
                        }
                    }
                    if (cknum + 4 >= totlePage) {
                        for (var k = 0; k < list_li.length; k++) {
                            list_li[list_li.length - 1 - k].innerText = totlePage - k;
                            if (list_li[list_li.length - 1 - k].innerText == cknum) {
                                changePage(list_li[list_li.length - 1 - k]);
                                eleindex = list_li.length - 1 - k;
                            }
                        }
                    }

                    nowPage = cknum;
                    console.log(nowPage);

                }
            }

            //切换页码选择的方法
            function changePage(page) {
                save.classList.remove("check");
                page.classList.add("check");
                save = page;
            }
            /*
             * 构造方法  修改li元素的页码值
             * */
            function changePageNum(res) {
                //中间索引
                var centerindex = 5;
                //切换颜色
                changePage(list_li[centerindex]);
                eleindex = centerindex;

                num(centerindex, "left");
                num(centerindex + 1, "right");
                function num(dex, way) {
                    var n = list_li[dex].innerText;
                    if (res == "up") {
                        n--;
                    }
                    else {
                        n++;
                    }
                    list_li[dex].innerText = n;
                    if (way == "right") {
                        dex++;
                        if (dex > list_li.length - 1) {
                            return;
                        }
                    }
                    else {
                        dex--;
                        if (dex < 0) {
                            return;
                        }
                    }
                    num(dex, way);
                }
            }




            /*
            * 不管是点击上下页  还是点击页面‘
            *
            * 调用一个方法 传入当前的页码
            *
            * */
        </script>
    </div>
</body>
</html>

2.第二种方法，使用for循环

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            height: 100px;
            border-bottom: 1px solid #000;
        }

        button {
            display: inline-block;
            width: 70px;
            height: 30px;
            line-height: 30px;
            cursor: pointer;
        }

        .menu {
            display: inline-block;
        }

        .menu > li {
            list-style: none;
            width: 30px;
            height: 30px;
            border: 1px solid #cccccc;
            display: inline-block;
            text-align: center;
            line-height: 30px;
            cursor: pointer;

        }

        .check {
            background-color: #009fff;
            color: #fff;
        }
    </style>
</head>
<body>
<div class="box">
    <button class="leftbtn">上一页</button>
    <ul class="menu">
        <li class="check">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>
    </ul>
    <button class="rightbtn">下一页</button>
    <script>
        /*
         * 基本的分页
         * */
        var totleNum = 242;//数据总条数
        var totlePage = 0;//总共多少页
        var nowPage = 1;//当前页
        var pageNum = 10;//一页显示多少条数据

        var save = null;//记录当前谁变色
        totlePage = Math.ceil(totleNum / pageNum);//使用向上取整的方法

        var leftbtn = document.querySelector(".leftbtn");
        var rightbtn = document.querySelector(".rightbtn");
        var list_li = document.querySelector(".menu").children;

        save = list_li[0];
        //上一页
        leftbtn.onclick = function () {
            if (nowPage <= 1) {
                return;
            }
            nowPage--;
            changePage(nowPage);
            changePageNum(nowPage);
        }
        //下一页
        rightbtn.onclick = function () {
            if (nowPage >= totlePage) {
                return;
            }
            nowPage++;
            changePage(nowPage);
            changePageNum(nowPage);
        }
        for (var i = 0; i < list_li.length; i++) {
            list_li[i].index = i;
            list_li[i].onclick = function () {

                nowPage = parseInt(this.innerText);
                changePage(nowPage);
                changePageNum(nowPage);
            }
        }

        //切换页码选择的方法
        function changePage(nowpageinfo) {
            save.classList.remove("check");
            //根据当前页 找元素
            for (var i = 0; i < list_li.length; i++) {
                if (list_li[i].innerText == nowpageinfo) {
                    list_li[i].classList.add("check");
                    save = list_li[i];
                }
            }
        }
        /*
         * 构造方法  修改li元素的页码值
         * */
        function changePageNum(nowpageinfo) {
            /*
            * 这个考虑前部分  在7之前当前页不走中间
            * */
            if (nowpageinfo < 6) {
                var s = null;
                for (var i = 0; i < list_li.length; i++) {
                    list_li[i].innerText = i + 1;
                    if (list_li[i].innerText == nowpageinfo) {
                        s = list_li[i];
                    }
                }
                changePage(nowpageinfo);
                save = s;
                return;
            }
            /*
            * 考虑后部分  最后一页出来了  当前页不走中间
            * */
            if (nowpageinfo > totlePage - 4) {
                var s = null;
                for (var i = 0; i < list_li.length; i++) {
                    list_li[i].innerText = totlePage - list_li.length + i + 1;
                    if (list_li[i].innerText == nowpageinfo) {
                        s = list_li[i];
                    }
                }
                changePage(nowpageinfo);
                save = s;
                return;
            }
            /*
            * 考虑中间   当前页走中间
            * */
            for (var i = 0; i < list_li.length; i++) {
                list_li[i].innerText = (nowpageinfo - 5) + i;
            }
            changePage(nowpageinfo);
        }


        /*
         * 不管是点击上下页  还是点击页面‘
         *
         * 掉同一个方法 传入当前的页码
         *
         * */
    </script>
</div>
</body>
</html>
Null_Robot
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
数据分页的实现
qq_41672008的博客
10-25 1486
数据分页的实现 今天在做项目的过程当中遇到了数据分页，说到数据分页，相信都不会陌生，平常百度的时候都会遇到： 这个算是比较经典的，今天特意实现一下数据分页，以下是我的效果图： 可以进行页数搜索，像这样： 外观看起来比较好看，也很好用 话不多说，直接上代码 以下是基本的布局 demo.html <!DOCTYPE html> <html> <hea...
分页查询两种实现
louyian的博客
04-25 327
分页查询 serviceImpl public PageInfo<ProjectDTO> getPage(Integer pageNum, Integer pageSize, ProjectParam projectParam) { Project project = new Project(); project.setName(projectParam.getName()); project.setProjectType(project...
一种数据分页方法
CY071512的博客
02-26 234
一种数据分页方法 工作中对数据进行分页的场景很常见，分享一种分页方法 private static <T> List<T> startPage(List<T> list, Integer pageNumber, Integer pageSize) { if (list == null || list.size() == 0) { return new ArrayList<>(); } int count = list.size(); // 记
什么是分页？如何使用分页？【含代码示例】
最新发布
一个做过前端开发的产品经理，经历过睿智产品的折磨导致脱发之后，励志要翻身"农奴"把歌唱，一边打入敌人内部一边持续提升自己，为我们广大开发同胞谋福祉，坚决抵制睿智产品折磨我们码农兄弟！
06-30 738
引言分页的基本概念和作用分页的作用分页实现原理示例一：基础分页查询解析示例二：基于条件的分页查询示例三：排序与分页结合示例四：复杂分页场景解析不同角度的功能使用思路1. 高效的分页策略2. 大数据集的分页处理3. 分页与缓存结合实际工作中的使用技巧结论。
对数据进行分页
sqh1232008的专栏
08-19 318
步骤：1.        创建SepPage类，并设置有关的方法。2.        在进行页面的转移时传递并当前的页面并传递参数。3.        进行分页处理。a.        计算总记录数b.        怎么样进行分页c.        首页显示处理d.        传递有关参数e.        获取有关传递的页面的参数实例：以查询所有的用户信息为例子进行说明package be...
基于layPage插件实现两种分页方式浅析
10-16
layPage是一款常用的JavaScript分页插件，它支持前端和服务器端两种分页方式，能够帮助开发者轻松地在网页中实现数据列表的分页展示。在本文中，我们将深入探讨这两种分页方式及其在实际应用中的实现。 首先，前端...
Android实现listview动态加载数据分页的两种方法
01-04
在android开发中，经常需要使用数据分页，比如要实现一个新闻列表的显示，或者博文列表的显示，不可能第一次加载就展示出全部，这就需要使用分页的方法来加载数据，在android中Handler经常用来在耗时的工作中，它...
再谈kettle两种循环之-调用http分页接口循环获取数据
06-26
本文将深入探讨“再谈kettle两种循环之-调用http分页接口循环获取数据”这一主题，旨在提供对循环Job、变量运用、调用HTTP分页接口、生成连续记录以及MD5加密等知识点的详细理解和实践指导。 首先，Kettle中的循环...
JavaWeb——【小技巧】——如何实现数据分页
奔跑的狮子
05-10 625
前言 在做项目的时候，总会因数据量过多而一页显示不了，所以需要进行分页的操作。 那么分页要怎么来分呢？博主会在这篇博文里进行讲解。 技术要求 下方文章会用到的技术用HTML、Js、AJAX、SSM等关键技术，尤其是SMM与AJAX。 分页条的前端代码： <nav class="pull-right"> <ul class="pagination" id="paging_t...
分页显示数据列表
12-20
从数据库查询并读取数据，再将读取到的数据分页显示到表格里
如何实现数据列优雅分页
qianshanding0708的博客
05-23 291
更多内容关注微信公众号：fullstack888入职新公司也有一段时间了，最近刚好主导了媒资库索引的构建，场景也主要集中在用户维度的查询，例如：用户个人主页媒资列表，用户在这些场景，一定程度上更希望有某一维度序列（时间/权重等）的溯源。不同于个性化推荐的场景，用户在这里看到的内容需要有一定的顺序性，也就涉及到分页方案的选型，现在就以微博个人主页这个场景作为示例，咱们看看都...
如何实现从数据库中取出的列表数据进行分页功能？
热门推荐
王伟的博客
02-10 1万+
一、你需要先创建一个bean对象（也就是page对象） 创建出你需要的属性比如在我的项目中我需要用到的：有当前的页码currentPage 当前的页显示的数量currentCount 你从数据库中查询得到的所有数据总和totalCount（这个你需要在dao层定义方法实现并把得到的数据返回给service层） 一共需要分多少页totalPage（这个需要你去计算通过查询所有的数据总和/current
数据分页
YINBEIS的博客
06-06 194
一.数据分页 1.创建页码 1.使用if、else语句对页码进行前缩、后缩以及前后缩；并进行传值； if (i == 2 && current - 5 > i) { i = current - 1; str += “…”; } else if (i == current + 5 && current + 5 < totle) { i = totle - ...
关于数据分页显示
YangChingyuk的博客
05-01 3046
利用js点击事件实现原生的分页为什么这样写的原因具体实现说明 为什么这样写的原因 一般来说我们进行分页显示数据时是利用上一页、下一页以及首页末页来进行请求接口然后进行局部刷新，这次分享的一个基础的功能接口实现，通过页面的点击上下按钮来进行数据的传递，或者是现在越来越多的前后端分离的实现，页面给我们提供了很好的框架来进行分页功能数据显示的实现，提供了很多分页的工具，所以这次来分享一个较为原生的分页功...
分页数据实现
xupeng1997的博客
04-17 178
对应的 曾删改查 都有对应的提示 package Org.Dao; import java.sql.Connection; import java.sql.DriverManager; import java.sql.PreparedStatement; import java.sql.ResultSet; import java.sql.SQLException; import java...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值