翻页功能对前端后端都是个难题啊！今天终于给踩了！哈哈！整理下方法，我是基于vueJs写的，同样适用于angular哈！
封装下载地址：vue.js翻页组件
效果截图：
整体实现逻辑，当用户点击页码时，ajax从后端获取数据，包括：records（当前页查询到的记录），totalRecords: 121（所有记录），currentPage（当前页码），totalPage（总页码），size（当前页显示数量），之后用我封装的算法assemblePageTurnerParams，算出页面展示哪些页码。
不得不说，我考虑的很全面的哈！！页码多的时候显示省略号，页码少的时候，则显示的少！
源码如下：
html
vue翻页 当前展示 {{ pageTurner.records }} 条记录，共{{ pageTurner.totalRecords }} 条记录
- «
- 1
- ...
- {{ page }}
- ...
- {{ pageTurner.totalPage }}
- »
vue
//ajax返回json
//{"status":true,"msg":"ok","data":{"accidentList":[{"token":"Mw==","accidentStatus":"triggered","endTime":"------------","continueTime":"------------","accidentStatusFriend":"u5f85u63a5u624b","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":"XXu786cu4ef6Fail","detail":"XXu786cu4ef6Failu53efu80fdu7684u539fu56e0u662fXXXuff0cu5efau8baeXXX"}","level":1,"genre":2,"from":"10.103.11.21","info":"XXu786cu4ef6Fail","serviceName":"ceshi"},{"token":"Mg==","accidentStatus":"triggered","endTime":"------------","continueTime":"------------","accidentStatusFriend":"u5f85u63a5u624b","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":"XXu786cu4ef6Fail","detail":"XXu786cu4ef6Failu53efu80fdu7684u539fu56e0u662fXXXuff0cu5efau8baeXXX"}","level":1,"genre":2,"from":"10.103.11.21","info":"XXu786cu4ef6Fail","serviceName":"ceshi"},{"token":"MQ==","accidentStatus":"triggered","endTime":"------------","continueTime":"------------","accidentStatusFriend":"u5f85u63a5u624b","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":"XXu786cu4ef6Fail","detail":"XXu786cu4ef6Failu53efu80fdu7684u539fu56e0u662fXXXuff0cu5efau8baeXXX"}","level":1,"genre":2,"from":"10.103.11.21","info":"XXu786cu4ef6Fail","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
本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。
