html+vue.js 实现漂亮分页功能可兼容IE


Posted in Javascript onNovember 07, 2020

当功能比较简单,在单一html中使用vue.js分页展示数据,并未安装脚手架,或使用相关UI框架,此时需要手写一个分页器,不失为最合理最便捷的解决方案

先看一下实现效果:

 html+vue.js 实现漂亮分页功能可兼容IE

 上代码:

1.简单搞一搞 CSS,此处代码有折叠
2.简单搞一搞 HTML 

<div id="app" v-cloak @click="showOption=false">
 第{{pageIndex}}页, 每页显示{{pageSize}}条
 <div v-show="pageTotalNum > 1" class="pageContainer">
  共{{dataListLength}}条
 <ul class="pagesInner">
  <li class="page" @click="prevOrNext(-1)"><span aria-hidden="true"><</span></li>
  <li class="page" v-for="(item, index) in pages" :key="index" :class="{actived: item == pageIndex}" @click="selectPage(item)">
  <span>{{item}}</span>
  </li>
  <li class="page" @click="prevOrNext(1)"><span class="fa fa-chevron-right" aria-hidden="true">></span></li>
 </ul>
 <div class="page-size-box">
  <span @click.stop="showOption=!showOption">{{pageSize}}条/页</span>
  <ul class="size-option" v-show="showOption">
  <li v-for="(item, index) in pageSizeList" :key="index" @click="pageSize=item;showOption=false">{{item}}条/页</li>
  </ul>
 </div>
 跳至 
  <form id="frm1">
   <input type="text" v-model="goToPage" style="text-align: center;">
  </form>
  页 
 button @click="handleGoToPage">确定</button>
 </div>
</div>

 3.搞事情啦 ~~~~

首先分析一下分页功能的实现思路:

  • 首页和尾页始终显示,

  • 通过数据总条数dataListLength及每页显示条数pageSize,计算出总页数pageTotalNum

  • 监听watch一下,每页显示条数pageSize,重置当前页码pageIndex=1

  • 我设计的分页每次最多显示5个页码(大家可根据需求自行调整),剩余部分 ... 代替,并设置不可点击,

  • 根据不同的总页数和当前页码的切换,页签展示形态有所不同,展示形态如下图对应序号展示

总页数 <= 1,不显示分页器
总页数 <= 5 && 总页数 > 1,显示全部页码
总页数 > 5 && 当前页面 <= 3 , 倒数第二个页码为...,页码从左往右计算
总页数 > 5 && 当前页面 > 3 && 当前页 < 总页数 - 3 , 正倒数第二个页码都为..., 页码以当前页码计算,±1
总页数 > 5 && 当前页面 > 3 && 当前页 > 总页数 - 3 , 正数第二个页码为..., 页码从右往左计算

html+vue.js 实现漂亮分页功能可兼容IE

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script> 	<!--兼容IE -->
<script>
 var app = new Vue({
 el: "#app",
 data: {
  pageIndex: 1,
  goToPage: '',
  // pageTotalNum: 16,
  dataListLength:147,
  pageSize:20,
  pageSizeList:[20,30,50,100],
  showOption:false
 },
 methods: {
  prevOrNext: function(n) {
  this.pageIndex += n
  this.pageIndex <= 1 ? this.pageIndex = 1 : this.pageIndex > this.pageTotalNum ? this.pageIndex = this.pageTotalNum : null
  },
  selectPage: function(n) {
  if (n === this.pageIndex) return
  if (typeof n === 'string') return
  this.pageIndex = n
  },
  handleGoToPage: function() {
  this.pageIndex = this.goToPage <= 1 ? 1 : this.goToPage - 0 >= this.pageTotalNum - 0 ? this.pageTotalNum :
  this.goToPage
  this.goToPage = this.pageIndex
  },
 },
 computed: {
  pageTotalNum:function(){
  return this.dataListLength % this.pageSize == 0 ? this.dataListLength / this.pageSize : Math.floor(this.dataListLength / this.pageSize) + 1
  },
  pages: function () {
  // 每次最多显示5个页码
  var c = this.pageIndex
  var t = this.pageTotalNum
  var p = []
  for (var i = 1; i <= t; i++) {
   p.push(i)
  }
  var l = p.length
  if (l <= 5) { // 总页数<=5,显示全部页码
   return p
  } else if (l > 5 && c <= 3) { // 总页数>5 && 当前页面<=3
   return [1, 2, 3, 4, '...', t] 
  } else if (l > 5 && c > 3 && c <= l - 2) { // 总页数 > 5 && 当前页面 > 3 && 当前页 < 总页数 - 3
   return [1, '...', c - 2, c - 1, c, '...', t] 
  } else { // 总页数 > 5 && 当前页面 > 3 && 当前页 > 总页数 - 3
   return [1, '...', t - 3, t - 2, t - 1, t] 
  }
  },
 },
 watch:{
  pageSize:function(nv,ov){
  this.pageIndex = 1
  }
 }
 });
</script>

到此这篇关于html+vue.js 实现漂亮分页功能可兼容IE的文章就介绍到这了,更多相关vue.js 分页内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
判断对象是否Window的实现代码
Jan 10 Javascript
CheckBoxList多选样式jquery、C#获取选择项
Sep 06 Javascript
jQuery调用RESTful WCF示例代码(GET方法/POST方法)
Jan 26 Javascript
JavaScript 性能优化小结
Oct 12 Javascript
基于js实现微信发送好友如何分享到朋友圈、微博
Nov 30 Javascript
H5移动端适配 Flexible方案
Oct 24 Javascript
如何使用Bootstrap 按钮实例详解
Mar 29 Javascript
jQuery插件FusionCharts绘制2D柱状图和折线图的组合图效果示例【附demo源码】
Apr 10 jQuery
Web开发使用Angular实现用户密码强度判别的方法
Sep 27 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
Nov 14 Javascript
小程序外卖订单界面的示例代码
Dec 30 Javascript
Node.js path模块,获取文件后缀名操作
Nov 07 Javascript
解决vue watch数据的方法被调用了两次的问题
Nov 07 #Javascript
vue 避免变量赋值后双向绑定的操作
Nov 07 #Javascript
浅谈Vue static 静态资源路径 和 style问题
Nov 07 #Javascript
解决VueCil代理本地proxytable无效报错404的问题
Nov 07 #Javascript
Nuxt 项目性能优化调研分析
Nov 07 #Javascript
js实现日历
Nov 07 #Javascript
工作中常用js功能汇总
Nov 07 #Javascript
You might like
php Smarty初体验二 获取配置信息
2011/08/08 PHP
浅谈php和.net的区别
2014/09/28 PHP
php实现cookie加密的方法
2015/03/10 PHP
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
this[] 指的是什么内容 讨论
2007/03/24 Javascript
firefox浏览器下javascript 拖动层效果与原理分析代码
2007/12/04 Javascript
解决表单中第一个非隐藏的元素获得焦点的一个方案
2009/10/26 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
jquery实现select选择框内容左右移动代码分享
2015/11/21 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
axios进阶实践之利用最优雅的方式写ajax请求
2017/12/20 Javascript
vue+springboot前后端分离实现单点登录跨域问题解决方法
2018/01/30 Javascript
Vue实现Layui的集成方法步骤
2020/04/10 Javascript
如何使用three.js 制作一个三维的推箱子游戏
2020/07/29 Javascript
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
Python的Django框架下管理站点的基本方法
2015/07/17 Python
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
Python实现类似比特币的加密货币区块链的创建与交易实例
2018/03/20 Python
python命令行工具Click快速掌握
2019/07/04 Python
python基础教程之while循环
2019/08/14 Python
python 实现将小图片放到另一个较大的白色或黑色背景图片中
2019/12/12 Python
在tensorflow中实现去除不足一个batch的数据
2020/01/20 Python
python使用多线程+socket实现端口扫描
2020/05/28 Python
Python之字典对象的几种创建方法
2020/09/30 Python
Python解析微信dat文件的方法
2020/11/30 Python
Pycharm 跳转回之前所在页面的操作
2021/02/05 Python
海蓝之谜英国官网:La Mer英国
2020/01/15 全球购物
俄罗斯在线购买飞机票、火车票、巴士票网站:Tutu.ru
2020/03/16 全球购物
教育技术职业规划范文
2014/03/04 职场文书
生产文员岗位职责
2014/04/05 职场文书
保护环境倡议书范文
2014/05/13 职场文书
建设工程授权委托书
2014/09/22 职场文书
不会写演讲稿,快来看看这篇文章!
2019/08/06 职场文书
MySQL8.0无法启动3534的解决方法
2021/06/03 MySQL
《乙女游戏世界对路人角色很不友好》OP主题曲无字幕动画MV公开
2022/04/05 日漫