基于Vuejs框架实现翻页组件_Javascript教程-查字典教程网

摘要：翻页功能对前端后端都是个难题啊！今天终于给踩了！哈哈！整理下方法，我是基于vueJs写的，同样适用于angular哈！封装下载地址：vue....

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

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

效果截图：

基于Vuejs框架实现翻页组件1

整体实现逻辑，当用户点击页码时，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> <div> <p>当前展示 {{ pageTurner.records }} 条记录，共{{ pageTurner.totalRecords }} 条记录</p> <ul> <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">...</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 " >...</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 pageSize this.pageTurner = assemblePageTurnerParams(11,121,page,10,12) console.log(JSON.stringify(this.pageTurner)) console.log('跳转到' + this.pageTurner.currentPage) } } });

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。