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 相关文章推荐
List all the Databases on a SQL Server
Jun 21 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
Oct 15 Javascript
JavaScript 处理Iframe自适应高度(同或不同域名下)
Mar 29 Javascript
JavaScript声明变量时为什么要加var关键字
Sep 29 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
对jQuary选择器的全面总结
Jun 20 Javascript
Web安全测试之XSS实例讲解
Aug 15 Javascript
JS实现快速的导航下拉菜单动画效果附源码下载
Nov 01 Javascript
使用html+js+css 实现页面轮播图效果(实例讲解)
Sep 21 Javascript
Vue 源码分析之 Observer实现过程
Mar 29 Javascript
js+css实现全屏侧边栏
Jun 16 Javascript
基于Electron实现桌面应用开发代码实例
Jul 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下使用以下代码连接并测试
2008/04/09 PHP
PHP 获取远程文件内容的函数代码
2010/03/24 PHP
PHP中空字符串介绍0、null、empty和false之间的关系
2012/09/25 PHP
destoon在各个服务器下设置URL Rewrite(伪静态)的方法
2014/06/21 Servers
php+mysql+jquery实现简易的检索自动补全提示功能
2017/04/15 PHP
php调用云片网接口发送短信的实现方法
2017/10/25 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
2019/12/31 PHP
Thinkphp 框架配置操作之配置加载与读取配置实例分析
2020/05/15 PHP
基于PHP+mysql实现新闻发布系统的开发
2020/08/06 PHP
dwr spring的集成实现代码
2009/03/22 Javascript
AeroWindow 基于JQuery的弹出窗口插件
2011/06/27 Javascript
完善的jquery处理机制
2016/02/21 Javascript
探索angularjs+requirejs全面实现按需加载的套路
2016/02/26 Javascript
angular ng-click防止重复提交实例
2017/06/16 Javascript
js判断节假日实例代码
2017/12/27 Javascript
jQuery实现常见的隐藏与展示列表效果示例
2018/06/04 jQuery
使用NestJS开发Node.js应用的方法
2018/12/03 Javascript
使用vue完成微信公众号网页小记(推荐)
2019/04/28 Javascript
JS指定音频audio在某个时间点进行播放
2020/11/28 Javascript
[44:33]EG vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
《与孩子一起学编程》python自测题
2018/05/27 Python
使用Python OpenCV为CNN增加图像样本的实现
2019/06/10 Python
python+pygame实现坦克大战小游戏的示例代码(可以自定义子弹速度)
2020/08/11 Python
马克华菲官方商城:Mark Fairwhale
2016/09/04 全球购物
德国机车企业:FC-Moto
2017/10/27 全球购物
周仰杰(JIMMY CHOO)英国官方网站:闻名世界的鞋子品牌
2018/10/28 全球购物
专科毕业生求职简历的自我评价
2013/10/12 职场文书
新闻学毕业生自荐信
2013/11/15 职场文书
大学生的网上创业计划书
2013/12/31 职场文书
黄河的主人教学反思
2014/02/07 职场文书
优秀员工评优方案
2014/06/13 职场文书
委托书范本
2014/09/13 职场文书
2014年社区工会工作总结
2014/12/18 职场文书
vue自定义右键菜单之全局实现
2022/04/09 Vue.js
HttpClient实现表单提交上传文件
2022/08/14 Java/Android