JS必会 分页效果

最新推荐文章于 2024-10-17 09:40:47 发布
最新推荐文章于 2024-10-17 09:40:47 发布
阅读量123 收藏
点赞数
分类专栏： JS必会项目案例 JS案例 文章标签： javascript 前端 服务器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_53798158/article/details/127822084
版权

 innerHTML 浏览器解析子标签  innerText  浏览器不解析子标签 原样显示 value

 准备一个空字符串

        让每个对象的数据 提取出来以后拼接到后边  

        拼接好的字符串放到 ul中

        var strs = '';

        lists.forEach(function(item){  // item是一个对象

            strs+= `

                <li>

                    <img src="${item.pic}" alt="">

                    <p>${item.name}</p>

                    <p>城市:${item.city}</p>                    

                    <p>地址:${item.address}</p>

                    <p>价格:${item.price}</p>                    

                    <p>时间:${item.showTime}</p>                    

                </li>  

            `

        });

        var uls = document.querySelector("ul");

        uls.innerHTML = strs;



 

          总页数

          用户决定看第几页  

          第一页  没有上一页了  

          最后一页  没有下一页了  

          每页显示多少条    程序员自己决定  

         已知  用户想看第几页  每页显示多少条   程序员自己决定  

        每页  4

         1     0  ~  3     4

         2     4  ~  7     4

         3     8  ~ 11     4

         4     12 ~ 15     4

         5     16 ~ 19     4

        current  (current-1)*pagesize ~ current*pagesize-1


 

        < 1 / 总页数  >

        当点击下一页   < 2 / 总页数  >  数字 ++

        当点击上一页   < 1 / 总页数  >  数字 --

        现在如果是1 /总页数    点击上一页 点不动  

        现在如果是10/总页数    点击下一页 点不动    

        1

        打开页面  从数组中截取数据  渲染到页面上  slice  

         当前第几页  页面总数  渲染到页面的    当前第几页 / 总共第几页


 

        2 调整上一页按钮的类名  

         如果第一页 类名 是 prev  和  disable

        如果不是第一页 只有 prev

        3 调整下一页按钮的类名  

         如果最后一页 类名 是 next  和  disable

        如果不是最后一页 只有 next

        4 下拉框  

        用户选择哪一个  每页展示多少条



 

        当用户点击上一页的时候

        当前页码 --

        根据页码 渲染数据  

        总页数 和当前页数  需要 改

        调整上一页按钮的类名  

         如果第一页 类名 是 prev  和  disable

        如果不是第一页 只有 prev

         调整下一页按钮的类名  

         如果最后一页 类名 是 next  和  disable

        如果不是最后一页 只有 next

        下拉框  

        用户选择哪一个  每页展示多少条


 

        当用户点击下一页的时候

        总页数 和当前页数  需要 改

        当前页码 ++

        根据页码 渲染数据  

        调整上一页按钮的类名  

         如果第一页 类名 是 prev  和  disable

        如果不是第一页 只有 prev

         调整下一页按钮的类名  

         如果最后一页 类名 是 next  和  disable

        如果不是最后一页 只有 next

        下拉框  

        用户选择哪一个  每页展示多少条


 

        用户点击下拉菜单的时候  

        修改每页显示多少条  

        渲染数据

        总页数 和当前页数  需要 改

        调整上一页按钮的类名  

         如果第一页 类名 是 prev  和  disable

        如果不是第一页 只有 prev

         调整下一页按钮的类名  

         如果最后一页 类名 是 next  和  disable

        如果不是最后一页 只有 next


 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        ul,
        li {
            list-style: none;
        }

        ul {
            width: 1200px;
            display: flex;
            flex-wrap: wrap;
            margin: 0 auto;
            justify-content: space-between;
            padding-top: 10px;
        }

        li {
            width: 290px;
            border: 1px solid #abcdef;
            margin-bottom: 10px;
            padding: 5px;
            box-sizing: border-box;
        }

        li>img {
            width: 278px;
            display: block;
        }

        .pagination {
            margin: 10px auto;
            width: 1200px;
            height: 50px;
            display: flex;
            align-items: center;

        }

        .pagination>.prev,
        .pagination>.next {
            width: 50px;
            height: 30px;
            cursor: pointer;
            background-color: orange;
            font-size: 30px;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;

        }


        .total {
            font-size: 30px;
            font-weight: 700;
            margin: 0 20px;
        }

        select {
            font-size: 25px;
            padding-left: 20px;
            margin-left: 30px;
        }

        .pagination>.disable {
            cursor: not-allowed;
            background-color: #ccc;
        }
    </style>
</head>

<body>
    <!-- innerHTML 浏览器解析子标签  innerText  浏览器不解析子标签 原样显示
        value -->
    <div class="pagination">
        <span class="prev">&lt;</span>
        <span class="total"> 98 / 100</span>
        <span class="next">&gt;</span>
        <select name="" id="">
            <option value="4">4</option>
            <option value="8">8</option>
            <option value="12">12</option>
            <option value="16">16</option>
            <option value="20">20</option>
        </select>
    </div>
    <ul>

    </ul>

    <script src="./dm_list.js"></script>
    <script>
        

        // 获取元素  

        // ul  //我们需要吧数据渲染到ul中  
        var contentBox = document.querySelector('ul');
        //prev 
        var prevBtn = document.querySelector('.prev');
        // next 
        var nextBtn = document.querySelector('.next');
        // select 
        var selectEle = document.querySelector('select');

        // 统计结果 
        var totalBox = document.querySelector('.total');


        // 准备变量 


        var pagesize = 16; // 每页显示4条  
        // pagesize  = selectEle.value
        var current = 7; // 当前页 默认为1 

        var total = 0; // 我们不知道数据总共多少条 

        //(current-1)*pagesize ~ current*pagesize-1 
        // 我们要取到 current*pagesize-1 
        // bindList [{},{},{},{}]
        function bindHtml() {
            var bindList = lists.slice((current - 1) * pagesize, current * pagesize) // [)
            contentBox.innerHTML = bindList.reduce(function (prev, item) {
                return prev + `
                <li> 
                    <img src="${item.pic}" alt="">
                    <p>${item.name}</p>
                    <p>城市:${item.city}</p>                    
                    <p>地址:${item.address}</p> 
                    <p>价格:${item.price}</p>                    
                    <p>时间:${item.showTime}</p>                    
                </li>  
            `
            }, '');

            total = Math.ceil(lists.length / pagesize); // (121 / 4) => 31
            totalBox.innerText = `${current} / ${total}`;

            prevBtn.className = current === 1 ? "prev disable" : 'prev';
            nextBtn.className = current === total ? "next disable" : 'next';
            selectEle.value = pagesize
        }

        // 打开页面开始渲染  

        bindHtml();

        // 点击下一页  

        nextBtn.onclick = function () {

            if (current === total) return // 当当前页=最后一页 那么不能往下点了
            current++;
            bindHtml();
        }

        // 上一页 
        prevBtn.onclick = function () {

            if (current === 1) return // 当前页=第一页 那么不能往前点了
            current--;
            bindHtml();
        }

        selectEle.onchange = function () {
            // alert(typeof selectEle.value);string
            pagesize = selectEle.value - 0; //转成数值 

            // 下拉菜单不管用户到第几页了 
            //只要选了 都是从头开始展示 
            current = 1

            bindHtml();

        }
    </script>
</body>

</html>

87小太阳
关注
专栏目录
前端打印时js分页实现共几页和第几页
08-06
js前端打印s分页实现共几页和第几页功能，触底自动换页，并每页表头新增固定部分，包括金额大写转换和当前时间获取
跳转到第几页的html怎么写,JavaScript 页面跳转的几种方式 转
weixin_42119358的博客
06-04 694
第一种：window.location.href="login.jsp?backurl="+window.location.href;第二种：alert("返回");window.history.back(-1);第三种：window.navigate("top.jsp");第四种：self.location=’top.htm’;第五种：alert("非法访问！");top.location=’x...
前后端分离，通用分页js处理模板
多思考思考
06-30 460
jquery-3.7.0随便下载一个就可以。
【js】js实现分页01
qq_36557846的博客
09-01 1250
js实现分页
计算分页页数或索引在第几页
wei_jie_zhang的专栏
08-04 5558
int totalCount = 100; int totalPageNo=0; int pageSize=10; //计算共多少页 totalPageNo = totalCount%pageSize==0 ? totalCount/pageSize : totalCount/pageSize+1; //判断索引10在第几页 int suoyin=10; int cu
JavaScript实现数据分页
xiuyuandashen的博客
05-13 4837
目录分页效果图如何分页代码 分页 当表单数据过多时，比较不容易浏览。这个时候就需要分页查看。 效果图 如何分页 1、首先确定总记录条数 len 2、单页浏览条数 page_number 3、页数 Total_pages=len % page_number == 0 ? len / page_number : len / page_number + 1; 计算出页数后就好办了,我们只需要对页码按钮设置点击事件，事件内容为，根据页数显示表格中的数据。数据用一个数组对象来保存，我们只需要遍历数组对象在页
基于JS分页控件实现简单美观仿淘宝分页按钮效果
10-21
通过本文所介绍的基于JS分页控件的实现方法，开发者可以实现类似淘宝的分页效果，并且用户在使用过程中会感受到更加流畅和直观的分页体验。分页控件的开发需要考虑多方面的细节，包括性能优化、用户交互的合理性以及...
前端 JavaScript js 联系人 分页
10-19
另外，对于复杂的前端应用，使用如Vue.js、React或Angular等前端框架会更方便，它们提供了组件化和状态管理，能更好地组织代码和提高可维护性。 总的来说，通过JavaScript实现联系人管理和分页显示，需要掌握...
分页效果插件特效代码
03-20
在网页开发中，分页效果是必不可少的一个功能，特别是在数据量较大的情况下，为了提高用户体验，分页能够有效地组织和展示信息。"分页效果插件特效代码" 提供了一种高效且灵活的方式来实现这一功能。下面我们将深入...
NodeJS和BootStrap分页效果的实现代码
10-21
总结来说，Node.js和Bootstrap结合实现分页效果，主要涉及以下几个关键技术点： 1. 在Node.js中处理数据库查询，获取分页所需的数据。 2. 使用模板引擎（如EJS）将数据传递给前端。 3. 前端使用Bootstrap分页组件...
使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
10-20
在当今的Web开发中，分页功能是必不可少的一部分，尤其是在处理大量数据的时候，合理地组织页面，可以提升用户体验，减少一次性加载数据的负担。本文介绍的是一种结合了Bootstrap框架和bootstrap-paginator.js插件的...
JS实现分页
午夜学徒xpf的博客
07-29 389
后台返回数据，不做分页，前端js实现分页效果。 //显示内容 <div id="contentlist"></div> //显示页码 <div id="turnpage" class="turnpage"></div> js实现： //动态显示翻页信息 function showPage() { var pageContent = '...
原生js实现分页功能
SugarXiXixi的博客
10-08 2473
原生js分页 实现效果 一、函数封装分页 传入两个参数。第一个为要显示第几页，第二个是页面显示多少数据， Js动态操作dom插入 分页按钮 条件结构判断 是否为按钮绑定点击事件 二、使用步骤 1.html+css 代码如下（示例）： <style> #idData{color:red;border:solid;text-align:center;} a{text-decoration:none;} </styl...
浅谈js分页的几种方法
sxs161028的博客
07-06 1392
一个项目中必然会遇到分页这种需求的，分页可以使数据加载更合理，也让页面显示更美观，更有层次感！那么js分页到底如何实现呢？下面我就来讲一下三种循序渐进的方法1.自己纯手写分页更深入的去理解分页的意义如分页的原理，其实，尝试自己去写一些分页方法是再合适不过的了，可以封装成一个分页方法，但是呢，这里呢，我就写一下最简单的指定的分页方法 ，就不去封装了。就以下图为例：上图是个非常普通的分页。第一个文本框可
js分页处理，两种方法
LoveAndLvan的博客
03-09 3817
js分页一套.js可以应用两种分页方法。 本人用的是ajax+java的请求，所以后太返回的数据都会在ajax的success中进行处理。一，从后台获取即点即查   所谓的即点即查就是当点击下一页的时候会执行查询的方法。例如，分页一百条数据，每页分为10条数据。首先通过sql 的count获得你所查询的数据总条数.success:function(data){ var count=data.d...
前端 js 处理一个数组 展示成层级下拉样式
最新发布
lzfengquan的博客
10-17 77
前端开发中，不管是什么时候都会遇到select 下拉框的使用，一般情况下，数据处理后端都会处理好。前端一般使用相应技术栈所推荐的公共组件就可以了。前端处理的前提是要确定那个是父级元素，那个是子级元素，这样才能更好的处理数据。这个时候前端要写个方法去处理这个数组了。这个数组后端是会给的。
npm 和 npx 的区别和使用场景
Dou_Hua6的博客
10-09 737
自动下载和缓存：如果本地未安装所需包，npx会自动下载并执行，执行完毕后可以选择保留或删除。脚本运行：通过package.json中的scripts字段定义和运行自定义脚本。依赖管理：管理项目的dependencies和devDependencies。简化命令行工具的使用：临时执行命令，避免全局安装带来的版本冲突或污染。npm 全称：Node Package Manager。发布包：将自己的包发布到npm注册表供他人使用。：无需全局安装即可运行npm包中的可执行文件。
【JavaScript】移动色块案例 实现一个可以拖动并且在拖动过程中会自动改变颜色的色块（JS 事件监听器）
m0_66584716的博客
10-11 1346
- **移动色块**：用户可以通过鼠标按住并拖动页面上的红色方块（`#blocks`）。当用户按下鼠标左键时，色块开始跟随鼠标的移动而移动；当用户释放鼠标左键时，色块停止移动。 - **显示当前位置**：随着色块的移动，其当前的屏幕坐标（相对于浏览器窗口）会被实时更新，并显示在页面底部左侧的位置显示区域（`#positionDisplay`）中。 - **自动变色**：一旦用户开始拖动色块，系统就会每隔300毫秒随机改变一次色块的颜色。颜色的变化是通过调用 `getRandomColor()` 函数生成一个
ECMAScript标准解析及其发展历史与技术演进
qq_20245171的博客
10-15 656
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值