一篇文章告訴你如何實(shí)現(xiàn)Vue前端分頁(yè)和后端分頁(yè)
更新時(shí)間:2021年12月31日 17:08:37 作者:lxslxskxs
這篇文章主要為大家介紹了如何實(shí)現(xiàn)Vue前端分頁(yè)和后端分頁(yè),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助
1:前端手寫分頁(yè)(數(shù)據(jù)量小的情況下)
前端需要使用slice截?。?tableData((page-1)pageSize,pagepageSize)
2:后端分頁(yè),前端只需要關(guān)注傳遞的page和pageSize
3:前端手寫分頁(yè)按鈕
<body> <div id="app"> <table class="table table-bordered table-condensed"> <tr class="bg-primary"> <th class="text-center">排序</th> <th class="text-center">用戶姓名</th> <th class="text-center">用戶性別</th> <th class="text-center">所在城市</th> </tr> <tr class="text-center active" v-for="(v,i) in list" :key="i"> <td>{{num(i)}}</td> <!-- <td>{{params.pagesize}}</td> --> <td>{{v.name}}</td> <td>{{v.sex}}</td> <td>{{v.addr}}</td> </tr> </table> <nav aria-label="Page navigation" style="text-align: center;"> <ul class="pagination"> <!-- 上一頁(yè) --> <li @click="prePage()" :class="{'disabled':params.page == 1}"> <a aria-label="Previous"> <span aria-hidden="true">«</span> </a> </li> <li :class="{'active': params.page == page}" v-for="(page,index) in pages" :key="index" @click="curPage(page)"> <a style="cursor: pointer;"> {{page}} </a> </li> <!-- 下一頁(yè) --> <li :class="{'disabled':params.page == totalPage}" @click="next()"> <a aria-label="Next"> <span aria-hidden="true">»</span> </a> </li> </ul> </nav> </div> </body>
window.onload = function () { // 1s內(nèi)只允許發(fā)送請(qǐng)求(出發(fā)事件)一次(可多次點(diǎn)擊) 節(jié)流 throttle new Vue({ el: '#app', data: { params:{ page:1, pagesize:20, name:'' }, list: [], total:0,//總的條數(shù) totalPage:0,//總的頁(yè)數(shù) flag: false, }, created() { this.getData() }, computed: { pages() { let totalPage = this.totalPage; let page = this.params.page; // 總的頁(yè)數(shù)小于10頁(yè) if(totalPage < 10) return totalPage; // 總的頁(yè)數(shù)大于10頁(yè)添加省略號(hào) if(page <= 5) { // 前五頁(yè) // (1) 頁(yè)碼小于5 左邊顯示六個(gè) return [1,2,3,4,5,6,'...',totalPage] } else if (page >= totalPage - 5) { // 后五頁(yè) console.log("觸發(fā)") // (2) 頁(yè)碼大于總頁(yè)數(shù)-5 右邊顯示六個(gè) return [1,'...',totalPage-5,totalPage-4,totalPage-3,totalPage-2,totalPage-1,totalPage] } else { // 中間五頁(yè) // (3)頁(yè)碼在 5-(totalPage-5)之間 左邊區(qū)間不能小于5 右邊區(qū)間不能大于總頁(yè)數(shù)totalPage,注意 左邊的當(dāng)前頁(yè)-num 不能小于1, 右邊的當(dāng)前頁(yè)+num不能大于總頁(yè)數(shù) return [1,'...',page-1,page,page+1,page+2,page+3,'...',totalPage] } }, num() { let { pagesize, page} = this.params // (1-1) * 10 + 10 + 0 + 1 = 1; // (2-1) * 10 + 10 + 0 + 1 = 11 // 第一頁(yè) = (當(dāng)前頁(yè) -1 )* 每頁(yè)的條數(shù) + 索引值 + 1 保證是從1開始的 return i => (page - 1) * pagesize + i + 1 // (當(dāng)前頁(yè)- 1 * 每頁(yè)的條數(shù)) + 索引值 + 1 } }, methods: { getData() { if(this.flag) return; this.flag = true; // 下面就是相當(dāng)于一個(gè)定時(shí)器 axios.get('http://localhost:3000/user/listpage',{params:this.params}).then(res => { console.log('res',res.data.users) let { total,users } = res.data.users; this.total = total; this.totalPage = Math.ceil( this.total / this.params.pagesize); this.list = users this.flag = false; }) }, curPage(page) { if(page == '...') return if(this.flag) return; this.params.page = page; this.getData() }, prePage() { // if(this.params.page == '...') return if(this.params.page > 1) { if(this.flag) return; --this.params.page; console.log('page',this.params.page) this.getData() } }, next() { // if(this.params.page == '...') return if(this.flag) return; console.log("執(zhí)行",this.totalPage) if(this.params.page < this.totalPage) { ++this.params.page; console.log('page',this.params.page) this.getData() } }, } }) }
總結(jié)
本篇文章就到這里了,希望能夠給你帶來(lái)幫助,也希望您能夠多多關(guān)注腳本之家的更多內(nèi)容!
相關(guān)文章
vue中三種插槽(默認(rèn)插槽/具名插槽/作用域插槽)的區(qū)別詳解
默認(rèn)插槽,具名插槽,作用域插槽是vue中常用的三個(gè)插槽,這篇文章主要為大家介紹了這三種插槽的使用與區(qū)別,感興趣的小伙伴可以了解一下2023-08-08vue實(shí)現(xiàn)按鈕文字動(dòng)態(tài)改變
這篇文章主要介紹了vue實(shí)現(xiàn)按鈕文字動(dòng)態(tài)改變方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11vue實(shí)現(xiàn)input框禁止輸入標(biāo)簽
這篇文章主要介紹了vue實(shí)現(xiàn)input框禁止輸入標(biāo)簽,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-04-04