位置: IT常识 - 正文

前端实现分页效果(前端分页显示)

编辑:rootadmin
前端实现分页效果 前言

推荐整理分享前端实现分页效果(前端分页显示),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:前端实现分页效果怎么做,前端做分页的逻辑,前端分页js,分页前端需要做什么,前端分页是什么意思,前端分页js,前端分页显示,前端实现分页效果,内容如对您有帮助,希望把文章链接给更多的朋友!

        在实际开发中,大部分分页都是配合后端完成的。但是,有时候并不是这样,并非不是这样。后端会一次性返回所有的数据,而我们前端不可能展示所有数据,而是弄一个分页效果。还有一些场景也是需要前端自己弄的分页,如:上传一个Excel表格展示到要页面,当表格的数据足够多,我们也需要弄一个分页效果。

        现在,我就带大家用数组中的slice方法在Vue中实现前端分页效果。

原理

        实现前端分页并不难,用需要用到数组的一个方法slice,看看官网对这个方法的介绍:slice() 方法返回一个新的数组对象,这一对象是一个由 begin 和 end 决定的原数组的浅拷贝(包括 begin,不包括end)。原始数组不会被改变。看完这句话,我们知道该方法在不破坏原数组的情况下返回一个新的数组。其实就对数据切割,并返回被切割的片段。

        slice方法最多可接收两个参数,可传一个或者不传。通过下面栗子来认识这个方法的使用。

使用1:不传递参数

        很明显,当我们不传参数的时候,它会返回整个数组给我们。也就是说,不传参数的时候,他不会对原数组进行切割。

// 准备一个数组const sect = ['少林派', '武当派', '逍遥派', '峨眉派', '华山派', '日月神教', '古墓派', '全真教', '丐帮', '明教']// slice 不传参数const newSect = sect.slice()console.log(newSect)// (10) ['少林派', '武当派', '逍遥派', '峨眉派', '华山派', '日月神教', '古墓派', '全真教', '丐帮', '明教']使用2:传递一个参数

        很明显,当我们传一个参数的时候,它会切割后的数组给我们:

当我们传1的时候,它会从索引为1的元素开始截取直到最后一个元素。

当我们传6的时候,它会从索引为6的元素开始截取直到最后一个元素。

当我们传10的时候,它会从索引为10的元素开始截取取直到最后一个元素。因为这个数组的长度为10,所以他的最大索引为9。所以当第一个参数比数组索引大,就会返回空的数组,这也是情理之中。

前端实现分页效果(前端分页显示)

当我们传-2的时候,它会从索引为8的元素来说截取,为什么从8开始? 当参数为负数的时候,给大家一个公式:arr.length + 参数,在这个例子就是:10 + (-2) = 8。你也可以说他是反过来数的,也没毛病!(理解最大)

也就是说,传递一个参数时,它会截取从索引为第一个参数到最后一个元素,并返回给我们。当参数比最大索引还大时,会返回空数组;当参数为负数是,它会反着数起始截取位置(不理解的可以使用上面的公式)。

// 准备一个数组const sect = ['少林派', '武当派', '逍遥派', '峨眉派', '华山派', '日月神教', '古墓派', '全真教', '丐帮', '明教']const newSect1 = sect.slice(1)const newSect2 = sect.slice(6)const newSect3 = sect.sect(10)const newSect4 = sect.slice(-2)console.log(newSect1)// (9) ['武当派', '逍遥派', '峨眉派', '华山派', '日月神教', '古墓派', '全真教', '丐帮', '明教']console.log(newSect2)// (4) ['古墓派', '全真教', '丐帮', '明教']console.log(newSect3)// []console.log(newSect4)// (2) ['丐帮', '明教']使用3:传递两个参数

        很明显,当我们传两个参数的时候,它也会切割后的数组给我们,但是截取不一定到最后一个元素:

当我们传0和2的时候,它会从索引为0开始截取直到索引为2的元素(不包括索引为2的元素)。

当我们传8和20的时候,它会从索引为8开始截取直到索引为20的元素(不包括索引为2的元素)。因为这个sect数组的的最大索引为9,他只会截取索引为8和9的元素。也可以怎么说:当第二个参数比数组的最大索引还大,就会截取到最后一个元素。

当我们传-2和-1的时候,它会从索引为8开始截取直到索引为9的元素(不包括索引为9的元素)。又是为什么呢? 这里我们也可以使用上面的公式:arr.length + 参数,在这个例子就是,第一个参数:10 + (-2) = 8,第二个参数:10 + (-1) = 9,所以就是 sect.slcie(8, 9)。

当我们传-2和-3的时候,原理上它会从索引为8开始截取直到索引为7的元素(不包括索引为7的元素)。这个情况比较特殊,它会返回一个空数组,因为截取是从左往右而不是从右往左。

也就是说,传递两个参数时,它会截取从索引为第一个参数开始到索引为第二个参数(不包含这个索引)结束,并返回给我们。当第二个参数比最大索引还大时,会截取到最后一个元素;当第二个参数比第一个参数小时,会返回空数组;当参数为负数是,它会反着数起始截取位置(不理解的可以使用上面的公式)。

// 还是准备一个数组const sect = ['少林派', '武当派', '逍遥派', '峨眉派', '华山派', '日月神教', '古墓派', '全真教', '丐帮', '明教']const newSect1 = sect.slice(0, 2)const newSect2 = sect.slice(8, 20)const newSect3 = sect.slice(-2, -1)const newSect4 = sect.slice(-2, -3)console.log(newSect1)// (2) ['少林派', '武当派']console.log(newSect2)// (2) ['丐帮', '明教']console.log(newSect3)// (1) ['丐帮']console.log(newSect4)// []

如果你对这个方法很熟,你可以跳过上面的内容,直接阅读下面的内容。如果你都很熟,我相信大佬一定会不吝赐教的!!!

实现

思路:在vue的生命周期函数中,请求全部数据,存到一个数组中。然后封装一个截取数组的方法对存全部数据的数组进行截取,每次调用都返回你想要的数组片段,以实现分页效果。这里使用element-ui+vue演练:

        在data中定义一个接受总数据的变量、一个真正展示的数据的变量(也就是,存放在总数据的数组中截取出来的片段)、一个总页数的变量(也就是,总数据的长度)、一个当前页的变量(默认是第一页)、一个没有大小的变量(默认为每页10条数据)。

        在vue的生命周期函数中,获取全部数据并存到放总数据的变量:tableData中,然后调用queryByPage方法对总数据进行截取,默认截取10条数据(索引为0 - 9),将截取后的数据保存到真正展示数据的变量pageData中。这里一上来就展示10条数据了,当我们改变当前页或者每页大小时,修改变量currentPage或者pageSize,然后执行queryByPage就可以截取我们想要的片段了。

具体queryByPage方法是怎么实现的:

当展示第1页并每页10条数据时:应当截取索引0-9的数据,即tableData.slice(0, 10) => currentPage = 1;pageSize = 10。当展示第1页并每页20条数据时:应当截取索引0-19的数据,即tableData.slice(0, 20) => currentPage = 1;pageSize = 20。当展示第2页并每页10条数据时:应当截取索引10-19的数据,即tableData.slice(10, 20) => currentPage = 2;pageSize = 20。

此时可以推出一个公式:tableData.slice((currentPage - 1) x pageSize, currentPage x pageSize)

Vue2版<template> <el-card class="box-card"> <div slot="header" class="clearfix"> <span>vue2实现前端分页</span> </div> <el-table :data="pageData" border size="mini" style="width: 100%"> <el-table-column prop="name" label="姓名" width="120" align="center" /> <el-table-column prop="age" label="年龄" width="80" align="center" /> <el-table-column prop="describe" label="描述" align="center" /> </el-table> <el-pagination style="margin-top: 12px;text-align: right;" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageTotal"> </el-pagination> </el-card></template><script>import axios from 'axios'export default { data () { return { // 总的数据 tableData: [], // 分页的数据 pageData: [], // 总数据量 默认为 0 pageTotal: 0, // 当前页 默认是第一页 currentPage: 1, // 每页大小 默认每页10条数据 pageSize: 10 } }, created () { this.fetchData() }, methods: { // 改变每页大小的回调 handleSizeChange (val) { this.pageSize = val this.pageData = this.queryByPage() }, // 改变当前页的回调 handleCurrentChange (val) { this.currentPage = val this.pageData = this.queryByPage() }, // 获取全部数据 async fetchData () { // pubic/table_data.json :默认请求后端数据 const { data } = await axios.get('/table_data.json') this.tableData = data.data this.pageTotal = data.data.length this.pageData = this.queryByPage() }, // 实现分页的方法 queryByPage () { // 起始位置 = (当前页 - 1) x 每页的大小 const start = (this.currentPage - 1) * this.pageSize // 结束位置 = 当前页 x 每页的大小 const end = this.currentPage * this.pageSize return this.tableData.slice(start, end) } }}</script>Vue3版<script setup lang="ts">import axios from "axios"import { reactive, onMounted } from "vue"// 表格数据接口interface ITable {name: string;age: number;describe: string;}let data = reactive({tableData: [] as ITable[], // 总的数据pageData: [] as ITable[], // 分页的数据currentPage: 1, // 当前页 默认是第一页pageSize: 10, // 每页大小 默认每页10条数据pageTotal: 0 // 总数据量 默认为 0})// 在
本文链接地址:https://www.jiuchutong.com/zhishi/300152.html 转载请保留说明!

上一篇:对java中代理的理解笔记(java代理有几种方式)

下一篇:技术+商业“双轮”驱动,量旋科技加速推进全方位的量子计算解决方案(技术和商业模式怎么写)

  • 创业+故事+网:京东之外,你想象不到刘强东还开饭馆、进日企、卖光碟(创业故事大全500)

    创业+故事+网:京东之外,你想象不到刘强东还开饭馆、进日企、卖光碟(创业故事大全500)

  • c盘桌面路径改为d盘(c盘桌面路径改为d盘桌面图标不见了)

    c盘桌面路径改为d盘(c盘桌面路径改为d盘桌面图标不见了)

  • 华为p30手机如何刷门禁卡(华为p30手机如何恢复出厂设置)

    华为p30手机如何刷门禁卡(华为p30手机如何恢复出厂设置)

  • 抖音直播怎么放视频(抖音直播怎么放电影)

    抖音直播怎么放视频(抖音直播怎么放电影)

  • 广域网通信中什么不是包交换机的任务(广域网以什么通信为主要目的)

    广域网通信中什么不是包交换机的任务(广域网以什么通信为主要目的)

  • Excel怎么做电子表格(电脑怎么做excel表格)

    Excel怎么做电子表格(电脑怎么做excel表格)

  • linearlayout是什么布局(linearlayout在哪)

    linearlayout是什么布局(linearlayout在哪)

  • macbook如何新建word文档(macbook如何新建桌面)

    macbook如何新建word文档(macbook如何新建桌面)

  • iphone扩内存有何影响(苹果扩内存有风险吗)

    iphone扩内存有何影响(苹果扩内存有风险吗)

  • 腾讯云服务器可以干嘛(腾讯云服务器可以转移账号吗)

    腾讯云服务器可以干嘛(腾讯云服务器可以转移账号吗)

  • 苹果官网退货几次影响信誉嘛(苹果官网退货几点上门取件)

    苹果官网退货几次影响信誉嘛(苹果官网退货几点上门取件)

  • 抖音直播该注意的规则(抖音直播该注意的话术)

    抖音直播该注意的规则(抖音直播该注意的话术)

  • 小米手表防水等级(小米手表防水等级ip68)

    小米手表防水等级(小米手表防水等级ip68)

  • 华为8x语音助手怎么唤醒(华为8c语音助手在哪)

    华为8x语音助手怎么唤醒(华为8c语音助手在哪)

  • 什么软件可以备份微信的聊天记录(什么软件可以备忘录提醒)

    什么软件可以备份微信的聊天记录(什么软件可以备忘录提醒)

  • 怎样把手机号码存到卡上(怎样把手机号码拉入黑名单)

    怎样把手机号码存到卡上(怎样把手机号码拉入黑名单)

  • 微信群里发的信息别人看不到(微信群里发的信息群主可以删除吗)

    微信群里发的信息别人看不到(微信群里发的信息群主可以删除吗)

  • 网易云怎么识别音乐(网易云怎么识别本地音乐)

    网易云怎么识别音乐(网易云怎么识别本地音乐)

  • 手机qq怎么图片和文字一起发(手机qq怎么图片带字)

    手机qq怎么图片和文字一起发(手机qq怎么图片带字)

  • 魅族16s怎么调整照片大小(魅族16th帧率怎么设置)

    魅族16s怎么调整照片大小(魅族16th帧率怎么设置)

  • 苹果新系统怎么删除应用(苹果新系统怎么删壁纸)

    苹果新系统怎么删除应用(苹果新系统怎么删壁纸)

  • 苹果xsmax是单卡还是双卡(苹果xsmax是几代)

    苹果xsmax是单卡还是双卡(苹果xsmax是几代)

  • qq的小程序游戏在哪里找(qq的小程序游戏怎么删掉?)

    qq的小程序游戏在哪里找(qq的小程序游戏怎么删掉?)

  • iPhone微信如何发动态表情(苹果微信怎么发)

    iPhone微信如何发动态表情(苹果微信怎么发)

  • 前端传递对象参数,以及后端接受参数 @PathVariable @RequestParam @RequestBody 注解的使用(前端向后端传递对象数组)

    前端传递对象参数,以及后端接受参数 @PathVariable @RequestParam @RequestBody 注解的使用(前端向后端传递对象数组)

  • 视觉SLAM总结——SuperPoint / SuperGlue(视觉slam ba)

    视觉SLAM总结——SuperPoint / SuperGlue(视觉slam ba)

  • Vue.js介绍(vue.js简介)

    Vue.js介绍(vue.js简介)

  • 二分查找(二分查找和折半查找一样吗)

    二分查找(二分查找和折半查找一样吗)

  • 购房发票契税票丢了可以补吗
  • 进项票可以抵扣销项票吗
  • 企业对公账户钱怎么取出来
  • 季报现金流量表可以不填吗
  • 调减加计抵减额会计分录
  • 纳入固定资产的标准
  • 机票行程单丢了可以重新打吗
  • 一般纳税人工会经费可以零申报吗
  • 新会计准则土地使用权摊销处理
  • 加计扣除是什么意思啊举例
  • 购买工程款计入什么科目
  • 以前年度应付款确认不再支付应调整到哪个科目?
  • 发票融资贷款应该怎么做账?
  • 以前年度少计提工资的会计处理
  • 出口的进项发票如何记账
  • 同一控制下企业合并会产生商誉吗
  • 城建税本月计提下月缴纳怎么算
  • 个体工商户个人经营所得税优惠政策
  • 计提生产经营
  • 只转让地上的建筑怎么办
  • 新个税申报身份怎么填
  • 2套账如何整合为一套账
  • 未开发票申报
  • 企业开办费摊销期限的税法规定
  • 公司院内打井怎么处罚
  • 公司发生的业务有哪些
  • 文化事业建设税计税依据是
  • 建筑行业怎么做职业生涯规划
  • 银行存款的利息收入计入什么科目
  • 路由器怎么才能用
  • web服务器做什么用的
  • php语言之面向对象编程 educoder
  • 应付股利属于债务吗
  • 企业安置残疾人如何残联备案
  • 年末结转利润分配账户的借方余额表示
  • 企业存货期末应如何计价
  • 普通增值税发票会计科目怎么写?
  • 固定资产折旧企业所得税税前扣除标准
  • php抽象函数
  • 该税号缺少必要信息
  • vue项目使用百度地图怎么长久使用
  • phpexcel导入
  • php读取excel数据
  • 坏账准备的账务处理例题
  • 装订会计凭证步骤
  • 兼职人员的差旅费
  • 以经营房产投资合营收固定收益如何开发票?
  • 企业管理费用科目有哪些
  • 商业会计和财务会计
  • 短期借款的账务处理借增贷减
  • 企业对外借款是什么意思
  • 微信转账报销怎么退回
  • 企业支付宝买东西怎么买
  • 工程施工中购买的设备一直未入账需要评估吗
  • 公司分红怎么做账
  • mysql数据库备份与恢复的常用方法有几种
  • sql比较数值大小
  • sqlserver管理工具有哪些
  • windows电源图标消失
  • wupdated.exe - wupdated是什么进程
  • linux防御
  • ubuntu怎么禁用nouveau
  • 如何卸载windows media player
  • windows10 天气
  • linux arp -s
  • window8设置ip
  • 如何检测装有监控器?
  • win10任务栏不显示输入法
  • win7升级win 10
  • android基于什么语言
  • 对new functionName()定义一个函数的理解
  • jquery时间格式
  • jquery input checked
  • 解决问题
  • bootstrap日期控件背景为白
  • python批量修改文本内容
  • swift协议范型
  • 江苏税务查询电子发票
  • 全国税务发票查询电话
  • 潍坊昌邑售房信息
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设