案例 分页渲染

最新推荐文章于 2024-06-17 15:13:54 发布
最新推荐文章于 2024-06-17 15:13:54 发布
阅读量413 收藏
点赞数
文章标签： 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Girasoles/article/details/127980145
版权

一、把鼠标变成小手：cursor:pointer；

二、分析： 

1、分页实现的逻辑：就是从原始数组中截取一个新的数组，用这个新的数组进行渲染；

截取数组的时候不可以改变新数组，所以我们需要用slice的方法 

2、第一步：当我们页面一打开

        ->我们需要截取一个数组，并组成一个新的数组，且还不影响原数组

        ->里面的数据是根据当前页和当前页的数量进行计算的

        ->使用截取出来的数据渲染我们的页面

        ->根据当前页或者是下一页判断是否需要disabled类名

        ->根据当前页的数量，去判断我们有多少页

第二步：点击下一步按钮时

        ->我们需要把当前页面的数字更换为下一页数字

        ->重新截取一组数据

        ->使用截取的数据重新渲染页面

        ->根据当前页判断上一页或者下一页是否需要disabled

        ->根据当前页的数量，去判断我们有多少页

第三步：点击上一步按钮时

        ->我们需要把当前页面的数字更换为上一页的数字

        ->重新截取一组数据

        ->使用截取的数据重新渲染页面

        ->根据当前页判断上一页或者下一页是否需要disabled

        ->根据当前页的数量，去判断我们有多少页

第四步：当我们点击选择有多少条的时候

        ->需要把显示的条数显示出来

        ->需要重新截取一组数据

        ->使用截取的数据重新渲染页面

        ->根据当前页判断上一页或者下一页是否需要disabled

        ->根据当前页的数量，去判断我们有多少页

综上可得：我们一直在重复执行一段代码，这些可以进行封装，在使用的时候进行调用；

3、简化可得：

第一步：页面一打开，调用一次函数；

第二步：点击下一步按钮，调用一次函数；

第三步：点击上一步按钮，调用一次函数；

第四步：点击选择数量，调用一次函数；

4、我们需要两个变量，一个表示页（current） 一个表示一页有多少条(pagesize)；

5、按照规律获取截取数组的开始索引和结束索引

[(current - 1) * pagesize] - [current * pagesize - 1]

6、截取数组：使用slice的时候我们需要注意，这个是包前不包后的，所以我们需要把截取的索引+1，才可以得到我们想要截取到的数据==[(current - 1) * pagesize] - [current * pagesize ]；

7、开始准备前端代码


<!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>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul,
        li {
            list-style: none;
        }
        
        .header,
        .footer,
        .content {
            width: 1200px;
            margin: 0 auto;
        }
        
        .header,
        .footer {
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: skyblue;
            color: #fff;
        }
        
        .header {
            font-size: 30px;
            height: 80px;
        }
        
        .footer {
            font-size: 100px;
            height: 300px;
        }
        
        .content {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;
            margin: 10px auto;
        }
        
        .content>li {
            border: 1px solid #333;
            width: 280px;
            margin-bottom: 10px;
        }
        
        li>img {
            width: 100%;
            height: 350px;
        }
        
        li>p {
            padding: 2px 10px;
        }
        
        .pagination {
            width: 1200px;
            height: 40px;
            margin: 0 auto;
            display: flex;
            align-items: center;
        }
        
        .pagination>span {
            padding: 5px 10px;
            background-color: skyblue;
            color: #fff;
            font-size: 20px;
            cursor: pointer;
        }
        /*
      span.disable
        需要同时满足 标签名是 span 并且 类名是 disable
    */
        
        .pagination>span.disable {
            background-color: #ccc;
            cursor: not-allowed;
        }
        
        .pagination>p {
            font-size: 20px;
            margin: 0 20px;
        }
        
        .pagination>select {
            padding: 3px 10px 3px 20px;
            font-size: 20px;
            margin-left: 20px;
        }
    </style>
</head>

<body>

    <div class="header">网页头部</div>
    <div class="pagination">
        <span class="prev disable">&lt;</span>
        <p class="total"> 1 / 10 </p>
        <span class="next ">&gt;</span>
        <select>
            <option value="4">4</option>
            <option value="6">6</option>
            <option value="8">8</option>
            <option value="12">12</option>
        </select>
    </div>
    <ul class="content">
        <!-- <li>
            <img src="" alt="">
            <p>2020西太湖国际音乐节</p>
            <p>城市: 常州</p>
            <p>地址: 常州西太湖中国花卉博览景区北门</p>
            <p>价格: 199-399</p>
            <p>演出时间: 2020.09.19-09.20</p>
        </li> -->
    </ul>
    <div class="footer">网页底部</div>
    <script src="./dm_list.js"></script>

    <script>此段代码在下一部分</script>
</body>
</html>

8、补充JS部分代码

        // 获取页面的元素
        var ulbox = document.querySelector('ul')
        var prevbox = document.querySelector('.prev')
        var nextbox = document.querySelector('.next')
        var totalBox = document.querySelector('.total')
        var selectBox = document.querySelector('select')

        // 设置页数和一页有多少个的变量,假设一页4个
        var current = 1;
        var pagesize =4;
        
        // 打开页面需要优先执行一次
        bindHtml()
        // 函数的封装
        function bindHtml(){
            // 先有一个新的数组存放截取的数据
            var bindList = list.slice([current - 1]*pagesize,current*pagesize)

            // 准备一个空字符串，接收数据，便于渲染页面
            var str = ''
            // 遍历数组，进行截取数据
            bindList.forEach(function(item){
                
                str += `
                <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> 
                `
            })

            // 进行页面渲染
            ulbox.innerHTML = str
            // 这里需要计算我们总共多少条，一页多少条,注意取整问题
            total = Math.ceil(list.length / pagesize)

            // 把这个数据渲染到页面上,显示当前页和总共页数
            totalBox.innerHTML = current + '/' +total

            // 判断上一页是否需要disable

            if(current === 1){
                prevbox.className = 'prev disable'
            }else{
                prevbox.className = 'prev'
            }
            // 也可以修改为三目
            // prevbox.className = current ===1 ? 'prev disable' : 'prev'

            // 判断下一页是否需要disable
            nextbox.className = current ===total ? 'next disable' : 'next'
        }

        // 点击上一步按钮，调用一次函数
        prevbox.onclick = function(){
            // 这里需要进行判断，一定不用点击的情况
            if(current === 1) return
            current--
            bindHtml()
        }

        // 点击下一步按钮，调用一次函数
        nextbox.onclick = function(){
            if(current === total) return
            current++
            bindHtml()
        }

        // 点击选择数量，调用一次函数
        selectBox.onchange = function(){
            pagesize = selectBox.value - 0
            current = 1
            bindHtml()
        }

Girasoless
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
分页器分页渲染
m0_49933232的博客
08-19 448
<!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>Document&lt
JS-part9.1-分页器分页渲染 / 下拉刷新分页渲染
晓葉斑比
07-11 460
JavaScript分页器分页渲染 分页器分页渲染 <!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
分页数据渲染
一个菜鸡的博客
02-01 1831
th:attr="pn=${result.pageNum - 1}"：将当前页码-1给pn赋值 th:if="${result.pageNum>1}"：如果当前页面大于1才显示上一页
前端渲染优化常用总结-滚动分页加载、虚拟列表、延迟加载IntersectionObserver
最新发布
weixin_44667515的博客
06-17 965
有时候数据量大，页面请求数量过多会造成不好的体验，比如接口响应时间慢、并发请求多，渲染慢等等。最近就遇到了类似的优化需求，主要是三种滚动分页加载、虚拟列表、延迟加载，在这里记录一下他们的使用场景。
Vue前端分页（分页渲染）
T8682828的博客
09-25 345
Vue前端分页（分页渲染）
案例--分页渲染
tby_pr的博客
10-13 471
分析: 1. 分析数据的使用 + 原始数据是 list, 一共有 28 条数据 + 当你显示的是第一页的时候, 根据当前页和一页显示多少条从原始数组里面截取出来一个新的数组 => 使用截取出来的新数组来渲染页面 => 例子: 一页 4 条 => 第 1 页, 使用 list 中, 索引 [0] [1] [2] [3] 四条数据渲染页面 => 第 2 页, 使用 list 中, 索引 [4] [5] [6...
通用分页案例的效果
shaobina的博客
06-21 261
什么为通用分页 1.简单的就是自己封装的一个分页类 2.自己可以直接调用，更改里面的sql语句即可 3分页三个属性 page页码 rows 每页的数量值 total 总记录数 pagination 是否分页 封装一个分页实体类 分页类的必要属性 1.page首页码 2.rows 每页的数量值 3.total 总记录数 4.pagination 是否分页 package com.page.uti...
JavaWeb实现分页查询案例
10-19
本案例通过原生的PageBean实现分页查询，采用JDBC（Java Database Connectivity）进行数据库操作，Servlet作为控制层处理请求，JSP（JavaServer Pages）用于展示数据。以下将详细解释这个案例中的关键知识点。 首先...
MVC案例，支持分页
11-16
5. 将数据传递给视图，渲染页面并显示分页结果。 6. 视图中包含分页控件，用户点击后，通过AJAX或页面重载发送新的分页参数到控制器。 **学习这个案例，初学者可以了解到如何在MVC项目中集成数据库操作，使用EF进行...
Mysql分页案例
08-02
在前端展示方面，可以使用各种前端框架或库，如HTML、JavaScript、jQuery、Vue.js等，将从后台获取的分页数据渲染成表格或其他形式。如果是Web应用，还可以使用Ajax异步请求，使得分页操作无刷新，提高用户体验。 ...
基于SSM框架下的分页系统案例
07-20
6. **响应返回**：控制器将Page对象返回给前端，前端根据分页信息渲染分页导航条。 在`boot-crm`这个文件中，可能包含了Spring Boot的CRM（Customer Relationship Management，客户关系管理）系统的源代码。Spring ...
JS前端分页条，支持前端，后台分页
12-13
JQ编写的一个简单分页条，样式，页面，JS分离，改写代码简单，使用方便。
内渲染器_ItemRenderer
05-05
提供： 内渲染器的使用方法。 通过2个List的 界面 自己看效果理解。
分页的案例
12-05
在这个特定的案例中，我们看到的是一个使用JavaBean、Struts1框架以及SQL Server数据库实现的分页功能。下面我们将详细探讨这些技术以及它们在分页中的应用。 首先，JavaBean是Java编程中的一种设计模式，主要用于...
Vue+element-ui实现表格数据渲染+分页
抗争小青年的博客
08-16 7055
Vue+element-ui实现表格数据渲染+分页具体属性请看官方文档：Table 表格这里给大家看一个比较不错的表格数据渲染的例子，也是我目前所写的项目中的一部分。这里呢我们就不给大家说顶栏和侧边栏Aside部分了，我们就只说表格数据是怎么渲染出来的，以及分页是如何实现的。渲染表格表格这块当然是&...
记录一个自己常用的JS 分页 + 渲染脚本
Seven Blog
10-12 1042
function InitData(db,_pageindex) { /*渲染页面分页元素*/ var InitPages = function () { /*显示当前页前后多少个链接*/ var showLinkCount = 3;
js分页器图片数据渲染
ICode联盟
10-12 179
js分页器图片数据渲染。
作为前端工程师，分片渲染和虚拟列表你需要知道
我们一起学前端
09-18 808
作为前端工程师，分片渲染和虚拟列表你需要知
uniapp下拉分页案例
05-05
下拉分页是指在页面滚动到底部时，自动加载下一页数据，以实现无限滚动的效果。在uniapp中，可以使用`onReachBottom`事件来实现下拉分页。 以下是一个简单的下拉分页案例： 1. 在页面的`<script>`标签中定义一个`page`变量，表示当前加载的页数。 ``` <script> export default { data() { return { page: 1, list: [] } }, methods: { // 加载数据 loadMore() { uni.request({ url: 'https://example.com/api/list', data: {page: this.page}, success: (res) => { this.list = this.list.concat(res.data) this.page++ } }) } }, onReachBottom() { // 触发下拉分页 this.loadMore() } } </script> ``` 2. 在页面的`<template>`标签中，使用`uni-list`组件和`v-for`指令来渲染列表数据。 ``` <template> <view> <uni-list> <uni-list-item v-for="item in list" :key="item.id"> {{ item.title }} </uni-list-item> </uni-list> </view> </template> ``` 3. 在页面的`<style>`标签中，设置`uni-list`组件的高度为屏幕高度减去导航栏高度，并添加样式以隐藏加载更多提示。 ``` <style> uni-list { height: calc(100vh - 88rpx); } uni-list-item.loading { display: none; } </style> ``` 以上就是一个简单的下拉分页案例。当用户滚动到页面底部时，会触发`onReachBottom`事件，从而调用`loadMore`方法加载下一页数据，并将数据添加到列表中。在加载数据时，可以通过传递页数来实现分页效果。同时，为了美观，可以通过添加样式来隐藏加载更多提示。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值