基于vueJs框架的翻页组件

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

封装下载地址：http://download.csdn.net/detail/lemon_zhao/9611920

效果截图：

整体实现逻辑，当用户点击页码时，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() {//首次查询时 传递查询第一页和pageSizethis.queryData(1)},methods: {queryData:function(page){//do ajax here//从后台获取到records totalRecords totalPage size//用assemble方法计算出所有翻页相关的参数//assemblePageTurnerParams 的4个参数 records totalRecords page totalPage pageSizethis.pageTurner = assemblePageTurnerParams(11,121,page,10,12)console.log(JSON.stringify(this.pageTurner))console.log('跳转到' + this.pageTurner.currentPage)}}
});

基于vueJs框架的翻页组件相关推荐

安卓APP_ 布局（8) —— 基于 RecyclerView 的 ViewPager2翻页
摘自:安卓APP_ 布局(8) -- 基于 RecyclerView 的 ViewPager2翻页作者:丶PURSUING 发布时间: 2021-04-20 15:37:54 网址:https:// ...
Bootstrap翻页组件
翻页组件一些简单的网站,比如博客或者杂志网站,希望用更少的标记和样式,来创建简单的"前一页"和"后一页"的翻页组件. Bootstrap中,只需为列表设置.p ...
基于ESP32的蓝牙翻页器设计(论文附调试成功代码！！）
基于ESP32的蓝牙翻页器设计目录基于ESP32的蓝牙翻页器设计 1 摘要 1 1.绪论 2 1.1认识蓝牙 2 1.2研究思路 3 2.软硬件设计 3 2.1中央处理模块------ESP32 ...
vue实现上下滑动翻页_如何通过vue实现一款简单通用的翻页组件
预览先上一波效果图: 基本元素首先,翻页组件(以下称"pager组件")一般拥有的元素有: 上一页第一页中间显示的页码最后一页下一页初始化时需要的配置有: total ...
selenium切换iframe框架案例——翻页爬取网易云音乐歌单作者和名称
翻页爬取网易云音乐歌单作者和标题案例目的: 通过翻页selenium操作网易云音乐,介绍如何切换iframe框架以及如何使用selenium定位数据所在的节点. 代码功能: 输入下载的数据页数,自动 ...
Bootstrap 分页导航中的翻页组件
分页导航中的翻页一些简单的网站,比如博客或者杂志网站,希望用更少的标记和样式,来创建简单的"前一页"和"后一页"的翻页导航. Bootstrap中,只需为列表 ...
OA系统八：用户登录一：基于LayUI框架开发登录页；
本篇博客就需要明白三点: (1)前端的东西,贵在[没事多试试]:多试试,看看效果,反复多次,总能看到希望的效果啦.没什么意思,没必要每个细节都深记:在实际中遇到一个业务的时候,多看官方文档的例子,多试 ...
cc-ui|一款基于uni-app框架开发的生态组件库
一.web前端行业发展史自互联网行业发展以来,web前端不断的发展和变化着. 在前人的基础上,后人有幸能够站在前人的肩膀上行走.前端的发展变化不仅是继承式的迭代,同时也是不断地变革和创造. Java ...
AI+Science系列（二）：国内首个基于AI框架的CFD工具组件！赛桨v1.0 Beta API介绍以及典型案例分享！
AI for Science被广泛认为是下一代科研范式,可以有效处理多维度.多模态.多场景下的模拟和真实数据,解决复杂推演计算问题,加速新科学问题发现[1] .百度飞桨科学计算工具组件赛桨Paddle ...

基于vueJs框架的翻页组件

基于vueJs框架的翻页组件相关推荐

最新文章

热门文章