基于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插件 tabBox实现代码
Feb 09 Javascript
jquery 绑定回车动作扑捉回车键触发的事件
Mar 26 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
Mar 02 Javascript
JavaScript生成随机字符串的方法
Mar 19 Javascript
JavaScript中的fontsize()方法使用详解
Jun 08 Javascript
微信小程序 scroll-view隐藏滚动条详解
Jan 16 Javascript
Angular在模板驱动表单中自定义校验器的方法
Aug 09 Javascript
基于Vue插入视频的2种方法小结
Apr 02 Javascript
bootstrap table插件动态加载表头
Jul 19 Javascript
vue实现路由不变的情况下,刷新页面操作示例
Feb 02 Javascript
vue/cli 配置动态代理无需重启服务的方法
May 20 Vue.js
JS前端可扩展的低代码UI框架Sunmao使用详解
Jul 23 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中使用crypt()实现用户身份验证的代码
2012/09/05 PHP
PHP函数addslashes和mysql_real_escape_string的区别
2014/04/22 PHP
Smarty中常用变量操作符汇总
2014/10/27 PHP
详解php语言最牛掰的Laravel框架
2017/11/20 PHP
详解php伪造Referer请求反盗链资源
2019/01/24 PHP
jquery ajax jsonp跨域调用实例代码
2013/12/11 Javascript
JavaScript学习笔记之Function对象
2015/01/22 Javascript
jQuery插件MixItUp实现动画过滤和排序
2015/04/12 Javascript
jQuery select自动选中功能实现方法分析
2016/11/28 Javascript
正则中的回溯定义与用法分析【JS与java实现】
2016/12/27 Javascript
AngularJS使用ng-app自动加载bootstrap框架问题分析
2017/01/04 Javascript
Javascript中字符串相关常用的使用方法总结
2017/03/13 Javascript
Vue 按键修饰符处理事件的方法
2018/05/04 Javascript
在Vue 中实现循环渲染多个相同echarts图表
2020/07/20 Javascript
vue项目,代码提交至码云,iconfont的用法说明
2020/07/30 Javascript
python操作xml文件详细介绍
2014/06/09 Python
在Python中实现贪婪排名算法的教程
2015/04/17 Python
python+matplotlib实现礼盒柱状图实例代码
2018/01/16 Python
使用python获取csv文本的某行或某列数据的实例
2018/04/03 Python
python的scikit-learn将特征转成one-hot特征的方法
2018/07/10 Python
python3获取控制台输入的数据的具体实例
2020/08/16 Python
详解canvas绘制多张图的排列顺序问题
2019/01/21 HTML / CSS
美国最大网上鞋店:Zappos
2016/07/25 全球购物
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
Bata印度官网:源自欧洲舒适鞋履品牌
2020/01/30 全球购物
业务员岗位职责范本
2013/12/15 职场文书
幼教简历自我评价
2014/01/28 职场文书
食品安全检查制度
2014/02/03 职场文书
医院总经理岗位职责
2014/02/04 职场文书
学生手册家长评语
2014/02/10 职场文书
志愿者活动总结范文
2014/04/26 职场文书
财务会计实训报告
2014/11/05 职场文书
赔偿协议书
2015/01/27 职场文书
MongoDB balancer的使用详解
2021/04/30 MongoDB
Redis特殊数据类型HyperLogLog基数统计算法讲解
2022/06/01 Redis
nginx之内存池的实现
2022/06/28 Servers