基于Vuejs框架实现翻页组件


Posted in Javascript onJune 29, 2020

翻页功能对前端后端都是个难题啊!今天终于给踩了!哈哈!整理下方法,我是基于vueJs写的,同样适用于angular哈!

封装下载地址:vue.js翻页组件  

效果截图:

基于Vuejs框架实现翻页组件

整体实现逻辑,当用户点击页码时,ajax从后端获取数据,包括:records(当前页查询到的记录),totalRecords: 121(所有记录),currentPage(当前页码),totalPage(总页码),size(当前页显示数量),之后用我封装的算法assemblePageTurnerParams,算出页面展示哪些页码。

不得不说,我考虑的很全面的哈!!页码多的时候显示省略号,页码少的时候,则显示的少!

源码如下:

html

<!DOCTYPE html> 
<html> 
<head> 
 <title>vue翻页</title> 
 <link rel="stylesheet" type="text/css" href="css/pageTurner.css"> 
</head> 
<body class="myApp"> 
 <div class="wrapper"> 
 <p class="records">当前展示 {{ pageTurner.records }} 条记录,共{{ pageTurner.totalRecords }} 条记录</p> 
 <ul class="page-turner-container clearfix"> 
 <li v-on:click="queryData(pageTurner.currentPage-1)">«</li> 
 <!-- 首页 --> 
 <li v-on:click="queryData(1)" :class="pageTurner.currentPage == 1 ? 'current-page' : '' ">1</li> 
 <li v-if="pageTurner.currentPage>4 && pageTurner.totalPage>7" class="omit">...</li> 
 
 <!-- 展示页 --> 
 <li v-for="page in pageTurner.displayPageList" :class="page == pageTurner.currentPage ? 'current-page' : '' " v-on:click="queryData(page)">{{ page }}</li> 
 
 <!-- 尾页 --> 
 <li v-if="pageTurner.currentPage<pageTurner.totalPage-3 && pageTurner.totalPage>7 " class="omit" >...</li> 
 <li v-on:click="queryData(pageTurner.totalPage)" :class="pageTurner.currentPage == pageTurner.totalPage ? 'current-page' : '' " v-if="pageTurner.totalPage != 1 && pageTurner.totalPage>6">{{ pageTurner.totalPage }}</li> 
 <li v-on:click="queryData(pageTurner.currentPage+1)">»</li> 
 </ul> 
 </div> 
 
 <script type="text/javascript" src="lib/vue.js"></script> 
 <script type="text/javascript" src="pageTurner.js"></script> 
</body> 
</html>

vue

//ajax返回json 
//{"status":true,"msg":"ok","data":{"accidentList":[{"token":"Mw==","accidentStatus":"triggered","endTime":"------------","continueTime":"------------","accidentStatusFriend":"\u5f85\u63a5\u624b","id":"3","enId":"11","currentLevelNum":"0","curDuty":[{"id":"4420","name":"zhaopeng1","type":"member"}],"curPolicyId":"2","createTime":"2016-08-24 15:43:10","description":"{\"level\":1,\"genre\":2,\"from\":\"10.103.11.21\",\"info\":\"XX\u786c\u4ef6Fail\",\"detail\":\"XX\u786c\u4ef6Fail\u53ef\u80fd\u7684\u539f\u56e0\u662fXXX\uff0c\u5efa\u8baeXXX\"}","level":1,"genre":2,"from":"10.103.11.21","info":"XX\u786c\u4ef6Fail","serviceName":"ceshi"},{"token":"Mg==","accidentStatus":"triggered","endTime":"------------","continueTime":"------------","accidentStatusFriend":"\u5f85\u63a5\u624b","id":"2","enId":"10","currentLevelNum":"0","curDuty":[{"id":"4420","name":"zhaopeng1","type":"member"}],"curPolicyId":"2","createTime":"2016-08-24 15:43:07","description":"{\"level\":1,\"genre\":2,\"from\":\"10.103.11.21\",\"info\":\"XX\u786c\u4ef6Fail\",\"detail\":\"XX\u786c\u4ef6Fail\u53ef\u80fd\u7684\u539f\u56e0\u662fXXX\uff0c\u5efa\u8baeXXX\"}","level":1,"genre":2,"from":"10.103.11.21","info":"XX\u786c\u4ef6Fail","serviceName":"ceshi"},{"token":"MQ==","accidentStatus":"triggered","endTime":"------------","continueTime":"------------","accidentStatusFriend":"\u5f85\u63a5\u624b","id":"1","enId":"9","currentLevelNum":"0","curDuty":[{"id":"4420","name":"zhaopeng1","type":"member"}],"curPolicyId":"1","createTime":"2016-08-24 15:31:59","description":"{\"level\":1,\"genre\":2,\"from\":\"10.103.11.21\",\"info\":\"XX\u786c\u4ef6Fail\",\"detail\":\"XX\u786c\u4ef6Fail\u53ef\u80fd\u7684\u539f\u56e0\u662fXXX\uff0c\u5efa\u8baeXXX\"}","level":1,"genre":2,"from":"10.103.11.21","info":"XX\u786c\u4ef6Fail","serviceName":"nimi"}],"pageParams":{"records":"12","totalRecords":"121","currentPage":"2","totalPage":"18","size":12}}} 
 
//前4个属性是后台返回的,前端计算displayPageList展示列表 
var pageTurnerDefaultParams = { 
 records: 9, 
 totalRecords: 121, 
 currentPage: 1, 
 totalPage: 1, 
 size: 12, 
 displayPageList: [3,4,5,6,7] 
}; 
 
var assemblePageTurnerParams = function(records,totalRecords,currentPage,totalPage,size){ 
 var records = records; 
 var totalRecords = totalRecords; 
 var currentPage = currentPage; 
 var totalPage = totalPage; 
 var size = size; 
 var displayPageList = []; 
 
 var firstPage = '' 
 //第一页时 翻上页 
 if(currentPage<1){ 
 console.log('已经是第一页了!!') 
 currentPage = 1 
 } 
 //最后一个 翻下页 
 else if(currentPage>totalPage){ 
 console.log('已经是最后一页了!!') 
 currentPage = totalPage 
 } 
 
 //总页数小于7页 
 if (totalPage<7){ 
 console.log('总页数小于7页!') 
 //console.log('总页数:' + totalPage) 
 for (var j=2; j<=totalPage; j++){ 
 //console.log(j) 
 displayPageList.push(j) 
 } 
 } 
 //总页数大于等于7页 
 else{ 
 console.log('总页数大于等于7页!') 
 if (currentPage<5){ 
 console.log('点击的页面小于5') 
 firstPage = 2 
 } 
 // else if (currentPage<6){ 
 // console.log('点击的页面小于6') 
 // firstPage = 3 
 // } 
 else if(currentPage>totalPage-3){ 
 console.log('点击的页码大于总页码-3了') 
 firstPage = totalPage - 5 
 } 
 else{ 
 firstPage = currentPage-2; 
 } 
 
 for (var i=firstPage; i<firstPage+5; i++){ 
 displayPageList.push(i) 
 } 
 } 
 
 var params = { 
 records: records, 
 totalRecords: totalRecords, 
 currentPage: currentPage, 
 totalPage: totalPage, 
 size: size, 
 displayPageList: displayPageList 
 } 
 
 return params 
}; 
 
var pageTurnerController = new Vue({ 
 el: '.myApp', 
 data: { 
 pageTurner: pageTurnerDefaultParams 
 }, 
 ready: function() { 
 //首次查询时 传递查询第一页和pageSize 
 this.queryData(1) 
 }, 
 methods: { 
 queryData:function(page){ 
 //do ajax here 
 //从后台获取到records totalRecords totalPage size 
 //用assemble方法计算出所有翻页相关的参数 
 //assemblePageTurnerParams 的4个参数 records totalRecords page totalPage pageSize 
 this.pageTurner = assemblePageTurnerParams(11,121,page,10,12) 
 console.log(JSON.stringify(this.pageTurner)) 
 console.log('跳转到' + this.pageTurner.currentPage) 
 } 
 } 
});

本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。

关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery里的正则表达式说明
Aug 03 Javascript
中文字符串截取的js函数代码
Apr 17 Javascript
js遍历子节点子元素附属性及方法
Aug 19 Javascript
JavaScript避免内存泄露及内存管理技巧
Sep 05 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 Javascript
JS基于面向对象实现的放烟花效果
May 07 Javascript
javascript省市级联功能实现方法实例详解
Oct 20 Javascript
修改Jquery Dialog 位置的实现方法
Aug 26 Javascript
老生常谈Bootstrap媒体对象
Jul 06 Javascript
Vue路由守卫之路由独享守卫
Sep 25 Javascript
nest.js 使用express需要提供多个静态目录的操作方法
Oct 24 Javascript
ES6 十大特性简介
Dec 09 Javascript
vue2.0+webpack环境的构造过程
Nov 08 #Javascript
详解React-Todos入门例子
Nov 08 #Javascript
JS+CSS3制作炫酷的弹窗效果
Nov 08 #Javascript
值得学习的bootstrap fileinput文件上传工具
Nov 08 #Javascript
BootStrap table使用方法分析
Nov 08 #Javascript
bootstrap监听滚动实现头部跟随滚动
Nov 08 #Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 #Javascript
You might like
生成php程序的php代码
2008/04/07 PHP
php实现refresh刷新页面批量导入数据的方法
2014/12/23 PHP
php+redis实现商城秒杀功能
2020/11/19 PHP
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
JS组件Bootstrap实现弹出框和提示框效果代码
2015/12/08 Javascript
论Bootstrap3和Foundation5网格系统的异同
2016/05/16 Javascript
用AngularJS的指令实现tabs切换效果
2016/08/31 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
angularJS+requireJS实现controller及directive的按需加载示例
2017/02/20 Javascript
JavaScript基于replace+正则实现ES6的字符串模版功能
2017/04/25 Javascript
JS创建Tag标签的方法详解
2017/06/09 Javascript
基于js粘贴事件paste简单解析以及遇到的坑
2017/09/07 Javascript
使用socket.io实现简单聊天室案例
2018/01/02 Javascript
详解webpack4.x之搭建前端开发环境
2019/03/28 Javascript
ES6知识点整理之对象解构赋值应用示例
2019/04/17 Javascript
原生js基于canvas实现一个简单的前端截图工具代码实例
2019/09/10 Javascript
js实现整体缩放页面适配移动端
2020/03/31 Javascript
在vue中对数组值变化的监听与重新响应渲染操作
2020/07/17 Javascript
Vant picker 多级联动操作
2020/11/02 Javascript
[01:02]2014 DOTA2国际邀请赛中国区预选赛 现场抢先看
2014/05/22 DOTA
python获得linux下所有挂载点(mount points)的方法
2015/04/29 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
Pyqt实现无边框窗口拖动以及窗口大小改变
2018/04/19 Python
Matplotlib绘制雷达图和三维图的示例代码
2020/01/07 Python
利用pytorch实现对CIFAR-10数据集的分类
2020/01/14 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
详解python 破解网站反爬虫的两种简单方法
2020/02/09 Python
python 通过文件夹导入包的操作
2020/06/01 Python
HTML5之SVG 2D入门8—文档结构及相关元素总结
2013/01/30 HTML / CSS
幼儿园秋游活动方案
2014/01/21 职场文书
民政局个人整改措施
2014/09/24 职场文书
2015年高校就业工作总结
2015/05/04 职场文书
2016年感恩母亲节活动总结
2016/04/01 职场文书
用Python可视化新冠疫情数据
2022/01/18 Python
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript