html+vue.js 实现漂亮分页功能可兼容IE
当功能比较简单,在单一html中使用vue.js分页展示数据,并未安装脚手架,或使用相关UI框架,此时需要手写一个分页器,不失为最合理最便捷的解决方案
先看一下实现效果:
上代码:
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 , 正数第二个页码为..., 页码从右往左计算
<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 分页内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
相关文章
- 我们这里介绍php与KindEditor编辑器使用时如何利用KindEditor编辑器的分页功能实现文章内容分页,KindEditor编辑器在我们点击分页时会插入代码,我们只要以它为分切符,就...2016-11-25
- 最近接了一个项目,其中有需求要用到jquery分页控件,上网也找到了需要分页控件,各种写法各种用法,都是很复杂,最终决定自己动手写一个jquery分页控件,全当是练练手了。写的不好,还请见谅,本分页控件在chrome测试过,其他的兼容性...2015-10-30
- 本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考,具体如下:这里介绍的jquery伪分页效果,在火狐下表现完美,IE全系列下有些问题,引入了jQuery1.7.2插件,代码里有丰富的注释,相信对学习jQuery有不小的帮助,期...2015-10-30
- Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统.这篇文章主要介绍了vue.js 表格分页ajax 异步加载数据的相关资料,需要的朋友可以参考下...2016-10-20
Springboot如何使用mybatis实现拦截SQL分页
这篇文章主要介绍了Springboot使用mybatis实现拦截SQL分页,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-06-19- 在php中要实现分页比起asp中要简单很多了,我们核心就是直接获取当前页面然后判断每页多少再到数据库中利用limit就可以实现分页查询了,下面我来详细介绍分页类实现程序...2016-11-25
- v-for标签可以用来遍历数组,将数组的每一个值绑定到相应的视图元素中去,下面这篇文章主要给大家介绍了关于在Vue.js中轻松解决v-for执行出错的三个方案,文中通过示例代码介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面来一起看看吧。...2017-06-15
- 本文实例讲述了jquery实现的伪分页效果代码。分享给大家供大家参考,具体如下:这里介绍的jquery伪分页效果,在火狐下表现完美,IE全系列下有些问题,引入了jQuery1.7.2插件,代码里有丰富的注释,相信对学习jQuery有不小的帮助,期...2015-10-30
vue.js页面加载执行created,mounted的先后顺序说明
这篇文章主要介绍了vue.js页面加载执行created,mounted的先后顺序说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧...2020-11-07- 本文主要对介绍利用Vue.js 的递归组件,实现了一个最基本的树形菜单。具有很好的参考价值,下面就跟着小编一起来看下吧...2017-01-09
- 这篇文章主要为大家详细介绍了AngularJS实现分页显示数据库信息效果的相关资料,感兴趣的小伙伴们可以参考一下...2016-07-06
- 这篇文章主要介绍了基于jquery实现表格无刷新分页,功能实现了前端排序功能,增加了前端搜索功能,感兴趣的小伙伴们可以参考一下...2016-01-08
- 本篇文章主要介绍了详解前后端分离之VueJS前端,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 ...2017-05-27
- 这篇文章主要为大家详细介绍了vue实现页面打印自动分页的两种方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-29
- 过滤器,本质上就是一个函数。其作用在于用户输入数据后,它能够进行处理,并返回一个数据结果。下面这篇文章主要给大家介绍了Vue.js中过滤器的相关资料,需要的朋友可以参考借鉴,一起来看看吧。...2017-01-26
- 有时候我们从数据库获取的数据量太大,而我们不需要一次性显示那么多的时候,我们就要对数据进行分页处理了,让每页显示不同的数据。...2020-06-25
- 这篇文章主要为大家详细介绍了Vue.js组件tabs实现选项卡切换效果的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2016-12-02
- 对于单页应用,官方提供了vue-router进行路由跳转的处理,这篇文章主要给大家介绍了Vue.js实战之利用vue-router实现跳转页面的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。...2017-04-03
- 这篇文章主要为大家详细介绍了原生js实现分页效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-09-24
- 这篇文章主要介绍了学习 Vue.js 遇到的那些坑,帮助大家更好的理解和使用vue框架,感兴趣的朋友可以了解下...2021-02-04