基于Vuejs框架实现翻页组件
翻页功能对前端后端都是个难题啊！今天终于给踩了！哈哈！整理下方法，我是基于vueJs写的，同样适用于angular哈！
封装下载地址：vue.js翻页组件
效果截图：
整体实现逻辑，当用户点击页码时，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组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
前端框架Vue.js构建大型应用浅析
真正的模块化 前端模块化很早就开始了,无论是 require.js,browserify 进行模块化打包, 还是 Angular 进行依赖注入,我们都可以把JS代码分成一个个小的模块并组装起来.然后我们还会通过 less 或者 sass 来把CSS文件也拆成一个个小的模块来写,甚至我们在CSS代码中感受到了 封装,继承,多态 等面向对象的特性. 然而,在 webpack 出来之前,我们所谓的模块化根本不能算作模块化.为什么这么讲,因为我们存在一个重要的问题没有解决,就是JS模块对CSS模块的依赖
-
前端框架学习总结之Angular、React与Vue的比较详解
近几年前端的技术发展很快,细分下来,主要可以分成四个方面: 1.开发语言技术,主要是ES6&7,coffeescript,typescript等: 2.开发框架,如Angular,React,Vue.js,Angular2等: 3.开发工具的丰富和前端工程化,像Grunt,Gulp,Webpack,npm,eslint,mocha这些技术: 4.前端开发范围的扩展,如服务端的nodejs,express,koa,meteor,GraphQL;移动端和跨平台的PhoneGap,ionic,Reac
-
前端框架Vue.js中Directive知识详解
Directive 看上去虽然和Angular中的定义类似,Directive 都是对DOM功能的一种拓展,但是 Vue 的 Directive 要弱的多.因为 Vue Component 其实本来就会包含对DOM的操作,所以大多数时候我们写一个通用组件都是一个Component 而不是一个 Directive,而 在 Angular 我们写一个通用的组件一般都是一个 Directive . 所以我说 Vue 的 Directive 相比于 Angular 要弱的多,也可以说纯粹的多,他就是对
-
Vue2.0 UI框架ElementUI使用方法详解
今天来介绍一下ElementUI的使用,在Vue2.0更新之后,很多UI框架也应运而生,这个框架是饿了么团队开发的一款适用于PC的一个UI框架,体验之后给我的个人感觉确实是有助于快速开发的一款UI框架,在饿了么GitHub中我下载了一个团队开发的官方Demo(GitHub链接为:https://github.com/taylorchen709/vue-admin)感觉可以应对初期团队项目为管理系统的开发这一类的网站,下面我就来仔细讲解下如何让官方的Demo运行起来 首先我们使用windows件+
-
利用VUE框架，实现列表分页功能示例代码
先来看一下效果图: 功能描述: 1. 点击页面序号跳转到相应页面: 2. 点击单左/单右,向后/向前跳转一个页面: 3. 点击双左/双右,直接跳转到最后一页/第一页: 4. 一次显示当前页面的前三个与后三个页面: 5. 始终显示最后一个页面: HTML: <!-- 分页开始 --> <div class="u-pages" style="margin-bottom:20px; margin-top:10px;"> <ul> <
-
前端主流框架vue学习笔记第二篇
接上篇,在本篇中,我们将要实现如下,功能,编辑和查询,我们当前的todolist程序,和线上其它的demo程序不同,我们会对其进行增删改查的基本操作,之后进行进一步的完善,按照常规的系统使用经验,一般我们新增和编辑都是在模态框中处理,这里我们不会去构建复杂的模态框,只用一个简单的div层来代替,后期接下来的文章中我们会重复造轮子,构建我们自己的轻量级框架(UI库). 首先,我们对我们的页面结构进行一下简单的调整,加入bootstrap只是为了让页面不那么赤裸裸,对其它不会有任何影响 <!DOCT
-
vue,angular,avalon这三种MVVM框架优缺点
本文的主要内容是参考官方文档说明总结而来: Vue.js Vue.js @尤雨溪 老师写的一个用于创建 web 交互界面的库,是一个精简的 MVVM.从技术角度讲,Vue.js 专注于 MVVM 模型的 ViewModel 层.它通过双向数据绑定把 View 层和 Model 层连接了起来.实际的 DOM 封装和输出格式都被抽象为了Directives 和 Filters.Vue.js和其他库相比是一个小而美的库,作者的主要目的是通过一个尽量简单的 API 产生可反映的数据绑定和可组合的视图组件
-
Vue.js 2.0 和 React、Augular等其他前端框架大比拼
React React 和 Vue 有许多相似之处,它们都有: 使用 Virtual DOM 提供了响应式(Reactive)和组件化(Composable)的视图组件. 保持注意力集中在核心库,伴随于此,有配套的路由和负责处理全局状态管理的库. 相似的作用域,我们会用更多的时间来讲这一块的比较.不仅我们要保持技术的准确性,同时兼顾平衡.我们指出React比Vue更好的地方,例如,他们的生态系统和丰富的自定义渲染器. React社区在这里非常积极地帮助我们实现这一平衡,特别感谢来自 React
-
vue.js中mint-ui框架的使用方法
本文为大家分享了vue.js中mint-ui框架的使用方法,具体内容如下 1.安装vue2.0的mint-ui框架 npm install mint-ui -save 2.引用和使用框架,我用的是全部组件,也可以按需选择加载相应的组件,不过要使用babel-plugin-component import Mint from 'mint-ui'; Vue.use(Mint); 3.创建一个header.vue组件,里面写入mint-ui的头部组件 <template> <mt-header
-
第一次接触神奇的前端框架vue.js
前言 入手2016最火前端框架之一vue.js.大概从网上找了些资料看了下vue.js,从网上的资料来看只能惊叹其发展速度太快,让我意外的是其作者是华人的前提下作品这么受欢迎. 网上的博客和教程各种组合.以至于我都有些感觉out.各种vue+webpack.vue+react.vue+es6+npm等等.琳琅满目.真是三天不学习赶不上刘少奇. 开篇主要是初次了解下vue.js,包括v-model.v-if.v-else.v-show.v-for(2.0对$index和$key舍弃,2.0要用in