基于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":"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<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 pageSizethis.pageTurner = assemblePageTurnerParams（11,121,page,10,12）console.log（JSON.stringify（this.pageTurner））console.log（"跳转到" + this.pageTurner.currentPage） }} }）;

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