基于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 相关文章推荐
img的onload的另类用法
Jan 10 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
Mar 01 Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
Feb 01 Javascript
JS关闭窗口与JS关闭页面的几种方法小结
Dec 17 Javascript
IScroll5 中文API参数说明和调用方法
May 21 Javascript
TinyMCE汉化及本地上传图片功能实例详解
May 31 Javascript
AngularJs中Bootstrap3 datetimepicker使用实例
Dec 13 Javascript
原生ajax处理json格式数据的实例代码
Dec 25 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
老生常谈Bootstrap媒体对象
Jul 06 Javascript
Layui table 组件的使用之初始化加载数据、数据刷新表格、传参数
Sep 11 Javascript
微信小程序中换行空格(多个空格)写法详解
Jul 10 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
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
完美解决PHP中的Cannot modify header information 问题
2013/08/12 PHP
php中将一段数据存到一个txt文件中并显示其内容
2014/08/15 PHP
YiiFramework入门知识点总结(图文教程)
2015/12/28 PHP
php结合mysql与mysqli扩展处理事务的方法
2016/06/29 PHP
Auntion-TableSort国人写的一个javascript表格排序的东西
2007/11/12 Javascript
javascript语言结构小记(一)
2011/09/10 Javascript
使用Java实现简单的server/client回显功能的方法介绍
2013/05/03 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
jquery实现超简洁的TAB选项卡效果代码
2015/08/28 Javascript
jQuery Mobile 触摸事件实例
2016/06/04 Javascript
完美JQuery图片切换效果的简单实现
2016/07/21 Javascript
Angular中$broadcast和$emit的使用方法详解
2017/05/22 Javascript
AngularJS实现进度条功能示例
2017/07/05 Javascript
React Native 截屏组件的示例代码
2017/12/06 Javascript
Angular实现的敏感文字自动过滤与提示功能示例
2017/12/29 Javascript
Windows上node.js的多版本管理工具用法实例分析
2019/11/06 Javascript
JS原型对象操作实例分析
2020/06/06 Javascript
python+mysql实现简单的web程序
2014/09/11 Python
Python3中的2to3转换工具使用示例
2015/06/12 Python
Python爬取京东的商品分类与链接
2016/08/26 Python
Python实现计算圆周率π的值到任意位的方法示例
2018/05/08 Python
python查看矩阵的行列号以及维数方式
2020/05/22 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
HTML5 的新的表单元素(datalist/keygen/output)使用介绍
2013/07/19 HTML / CSS
播音主持女孩的自我评价分享
2013/11/20 职场文书
4s客服专员岗位职责
2013/12/01 职场文书
教师年度考核自我鉴定
2014/01/19 职场文书
生日宴会主持词
2014/03/20 职场文书
高中学校对照检查材料
2014/08/31 职场文书
法院授权委托书格式
2014/09/28 职场文书
领导班子整改方案和个人整改措施
2014/10/25 职场文书
2014业务员年终工作总结
2014/12/09 职场文书
初中成绩单评语
2014/12/29 职场文书
工程部主管岗位职责
2015/02/12 职场文书
母亲去世追悼词
2015/06/23 职场文书