翻頁功能對前端後端都是個難題啊!今天終於給踩了!哈哈!整理下方法,我是基於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":"\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前端組件學習教程》,歡迎大家學習閱讀。
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持。