一篇文章告訴你如何實(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)文章
最近一直在做的項(xiàng)目是Vue2搭建的項(xiàng)目，本文主要介紹了Vue全局自定義指令Modal拖拽的實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
Vue中禁止編輯的常見(jiàn)方法(以禁止編輯輸入框?yàn)槔?
在我們開發(fā)項(xiàng)目的時(shí)候,有時(shí)候我們不希望用戶對(duì)我們的頁(yè)面進(jìn)行操作,尤其是輸入框之類的,這篇文章主要給大家介紹了Vue中禁止編輯的常見(jiàn)方法,文中介紹的方法主要以禁止編輯輸入框?yàn)槔?需要的朋友可以參考下2024-02-02
這篇文章主要介紹了vite如何支持cjs方案示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-09-09
vue中三種插槽(默認(rèn)插槽/具名插槽/作用域插槽)的區(qū)別詳解
默認(rèn)插槽，具名插槽，作用域插槽是vue中常用的三個(gè)插槽，這篇文章主要為大家介紹了這三種插槽的使用與區(qū)別，感興趣的小伙伴可以了解一下2023-08-08
vue實(shí)現(xiàn)按鈕文字動(dòng)態(tài)改變
這篇文章主要介紹了vue實(shí)現(xiàn)按鈕文字動(dòng)態(tài)改變方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
這篇文章主要為大家介紹了VUE的數(shù)據(jù)代理與事件，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2021-11-11
這篇文章主要給大家介紹了關(guān)于Vue.js源碼分析之自定義指令的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04
vue實(shí)現(xiàn)input框禁止輸入標(biāo)簽
這篇文章主要介紹了vue實(shí)現(xiàn)input框禁止輸入標(biāo)簽，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue中使用js-cookie詳情，文章圍繞js-cookie的相關(guān)資料展開詳細(xì)內(nèi)容具有一定的的參考價(jià)值，需要的小伙伴可以參考一下2022-03-03
最近做項(xiàng)目遇到這樣的一個(gè)需求，通過(guò)select元素來(lái)選擇音頻文件的名稱，點(diǎn)擊按鈕可以進(jìn)行試聽。接下來(lái)通過(guò)本文給大家介紹vue項(xiàng)目中通過(guò)點(diǎn)擊事件讀取音頻文件的方法,需要的朋友可以參考下2018-05-05