html++好看的分页页面,html+vue.js 实现漂亮分页功能可兼容IE

野性酷女 2022-10-06 05:46 87阅读 0赞

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

先看一下实现效果：

![a054df1723167f69ecf105c93150a767.gif][]

上代码：

1.简单搞一搞 CSS，此处代码有折叠

2.简单搞一搞 HTML

第\{ \{pageIndex\}\}页, 每页显示\{ \{pageSize\}\}条

共\{ \{dataListLength\}\}条

*  <
 *  \{ \{item\}\}
 *  >

\{ \{pageSize\}\}条/页

*  \{ \{item\}\}条/页

跳至

页

button @click="handleGoToPage">确定

3.搞事情啦 ~~~~

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

首页和尾页始终显示，

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

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

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

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

总页数 <= 1，不显示分页器

总页数 <= 5 && 总页数 > 1，显示全部页码

总页数 > 5 && 当前页面 <= 3 , 倒数第二个页码为...,页码从左往右计算

总页数 > 5 && 当前页面 > 3 && 当前页 < 总页数 - 3 , 正倒数第二个页码都为..., 页码以当前页码计算，±1

总页数 > 5 && 当前页面 > 3 && 当前页 > 总页数 - 3 , 正数第二个页码为..., 页码从右往左计算

![60ef7d671b59bcd1dfc8ee97765fe750.png][]

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

\});

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

[a054df1723167f69ecf105c93150a767.gif]: /images/20221005/0425890d7ead485ab29a3ad7e0ff106a.png
[60ef7d671b59bcd1dfc8ee97765fe750.png]: /images/20221005/840593fd21bb4841ad8ad9ffa7eb5ce9.png

html++好看的分页页面,html+vue.js 实现漂亮分页功能可兼容IE

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 MyBatisPlus分页插件实现分页功能

相关分页功能

相关 jqprint 分页打印_jQuery打印Html页面自动分页

相关 html++好看的分页页面,html+vue.js 实现漂亮分页功能可兼容IE

相关 Jdbc实现页面分页查询功能

相关分页功能

相关页面分页html拼接

相关 HTML分页插件功能实现

相关 java分页之页面分页

相关 JQuery实现分页功能