基于Vuejs框架实现翻页组件
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
翻页功能对前端后端都是个难题啊!今天终于给踩了!哈哈!整理下方法,我是基于vueJs写的,同样适用于angular哈!
封装下载地址:vue.js翻页组件
效果截图:
整体实现逻辑,当用户点击页码时,ajax从后端获取数据,包括:records(当前页查询到的记录),totalRecords: 121(所有记录),currentPage(当前页码),totalPage(总页码),size(当前页显示数量),之后用我封装的算法assemblePageTurnerParams,算出页面展示哪些页码。
不得不说,我考虑的很全面的哈!!页码多的时候显示省略号,页码少的时候,则显示的少!
源码如下:
html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <!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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | //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<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) } } }); |
本文已被整理到了《Vue.js前端组件学习教程》,欢迎大家学习阅读。
关于vue.js组件的教程,请大家点击专题vue.js组件学习教程进行学习。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
相关文章
vue2.0和mintui-infiniteScroll结合如何实现无线滚动加载
这篇文章主要介绍了vue2.0和mintui-infiniteScroll结合如何实现无线滚动加载,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10
最新评论