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 相关文章推荐
jQuery EasyUI NumberBox(数字框)的用法
Jul 08 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
jQuery获取选中内容及设置元素属性的方法
Jul 09 Javascript
jQuery中focus事件用法实例
Dec 26 Javascript
jquery validate和jquery form 插件组合实现验证表单后AJAX提交
Aug 26 Javascript
js实现人民币大写金额形式转换
Apr 27 Javascript
JavaScript实战(原生range和自定义特效)简单实例
Aug 21 Javascript
jQuery实现二维码扫描功能
Jan 09 Javascript
详解vue后台系统登录态管理
Apr 02 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 Javascript
JS字符串常用操作方法实例小结
Jun 24 Javascript
Vue组件模板的几种书写形式(3种)
Feb 19 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
用文本文件实现的动态实时发布新闻的程序
2006/10/09 PHP
第十五节--Zend引擎的发展
2006/11/16 PHP
加强版phplib的DB类
2008/03/31 PHP
配置Apache2.2+PHP5+CakePHP1.2+MySQL5运行环境
2009/04/25 PHP
The specified CGI application misbehaved by not returning a complete set of HTTP headers
2011/03/31 PHP
php简单的留言板与回复功能具体实现
2014/02/19 PHP
54个提高PHP程序运行效率的方法
2015/07/19 PHP
关于ThinkPhp 框架表单验证及ajax验证问题
2017/07/19 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
JavaScript DOM学习第六章 表单实例
2010/02/19 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
2013/09/10 Javascript
jQuery实现网页抖动的菜单抖动效果
2015/08/07 Javascript
jQuery插件ajaxFileUpload使用实例解析
2016/10/19 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
vue页面切换到滚动页面显示顶部的实例
2018/03/13 Javascript
详解vue如何使用rules对表单字段进行校验
2018/10/17 Javascript
简化版的vue-router实现思路详解
2018/10/19 Javascript
微信小程序左滑删除功能开发案例详解
2018/11/12 Javascript
JavaScript类型相关的常用操作总结
2019/02/14 Javascript
小程序测试后台服务的方法(ngrok)
2019/03/08 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
vue+openlayers绘制省市边界线
2020/12/24 Vue.js
[01:08:56]DOTA2-DPC中国联赛 正赛 Magma vs LBZS BO3 第一场 2月7日
2021/03/11 DOTA
使用Python3中的gettext模块翻译Python源码以支持多语言
2015/03/31 Python
用xpath获取指定标签下的所有text的实例
2019/01/02 Python
Python 点击指定位置验证码破解的实现代码
2019/09/11 Python
Python3 sys.argv[ ]用法详解
2019/10/24 Python
Python实现猜年龄游戏代码实例
2020/03/25 Python
基于Python实现简单学生管理系统
2020/07/24 Python
英国最专业的健身器材供应商之一:Best Gym Equipment
2017/12/22 全球购物
sleep()方法和wait()方法的区别是什么
2012/11/17 面试题
小学运动会表扬稿
2014/01/19 职场文书
机关道德讲堂实施方案
2014/03/15 职场文书
公司优秀员工获奖感言
2014/08/14 职场文书
springboot使用Redis作缓存使用入门教程
2021/07/25 Redis