基于Vuejs框架实现翻页组件

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

封装下载地址：vue.js翻页组件  

效果截图：

整体实现逻辑，当用户点击页码时，ajax从后端获取数据，包括：records（当前页查询到的记录），totalRecords: 121（所有记录），currentPage（当前页码），totalPage（总页码），size（当前页显示数量），之后用我封装的算法assemblePageTurnerParams，算出页面展示哪些页码。

不得不说，我考虑的很全面的哈！！页码多的时候显示省略号，页码少的时候，则显示的少！

源码如下：

html

 
 
 
  
  
 
 
 
 
 
当前展示 {{ pageTurner.records }} 条记录，共{{ pageTurner.totalRecords }} 条记录
 
 
 
 
«
 
  
 
1
 
 
...
 
 
  
 
{{ page }}
 
 
  
 
...
 
 
{{ pageTurner.totalPage }}
 
 
»
 
 
 
 
 
 
  
  
 
 

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 
 

本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。

关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。