前端之家 收集整理的这篇文章主要介绍了
基于Vuejs框架实现翻页组件 ,
前端之家 小编觉得挺不错的,现在分享给大家,也给大家做个参考。
翻页 功能 对前端后端都是个难题啊!今天终于给踩了!哈哈!整理下方法 ,我是基于vueJs写的,同样适用于angular哈!
封装下载地址:
效果截图:
整体实现逻辑,当用户点击页码时,ajax从后端获取数据,包括:records(当前页查询到的记录),totalRecords: 121(所有记录),currentPage(当前页码),totalPage(总页码),size(当前页显示数量),之后用我封装的算法assemblePageTurnerParams,算出页面展示哪些页码。
不得不说,我考虑的很全面的哈!!页码多的时候显示省略号,页码少的时候,则显示的少!
源码如下:
html
vue翻页
<li v-for="page in pageTurner.displayPageList" :class="page == pageTurner.currentPage ? 'current-page' : '' " v-on:click="queryData(page)">{{ page }}
...
<script type="text/javascript" src="lib/vue.js">
<script type="text/javascript" src="pageTurner.js">
//前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)
}
}
});