Javascript vue.js表格分頁(yè),ajax異步加載數(shù)據(jù)
分頁(yè)一般和表格一起用,分頁(yè)鏈接作為表格的一部分,將分頁(yè)鏈接封裝成一個(gè)獨(dú)立的組件,然后作為子組件嵌入到表格組件中,這樣比較合理。
效果:
代碼:
1.注冊(cè)一個(gè)組件
js
Vue.component('pagination',{ template:'#paginationTpl', replace:true, props:['cur','all','pageNum'], methods:{ //頁(yè)碼點(diǎn)擊事件 btnClick: function(index){ if(index != this.cur){ this.cur = index; } } }, watch:{ "cur" : function(val,oldVal) { this.$dispatch('page-to', val); } }, computed:{ indexes : function(){ var list = []; //計(jì)算左右頁(yè)碼 var mid = parseInt(this.pageNum / 2);//中間值 var left = Math.max(this.cur - mid,1); var right = Math.max(this.cur + this.pageNum - mid -1,this.pageNum); if (right > this.all ) { right = this.all} while (left <= right){ list.push(left); left ++; } return list; }, showLast: function(){ return this.cur != this.all; }, showFirst: function(){ return this.cur != 1; } } });
模板:
<script type="text/template" id="paginationTpl"> <nav v-if="all > 1"> <ul class="pagination"> <li v-if="showFirst"><a href="javascript:" @click="cur--">«</a></li> <li v-for="index in indexes" :class="{ 'active': cur == index}"> <a @click="btnClick(index)" href="javascript:">{{ index }}</a> </li> <li v-if="showLast"><a @click="cur++" href="javascript:">»</a></li> <li><a>共<i>{{all}}</i>頁(yè)</a></li> </ul> </nav> </script>
HTML:
<div id='item_list'> ... <pagination :cur="1" :all="pageAll" :page-num="10" @page-to="loadList"></pagination> </div>
當(dāng)點(diǎn)擊分頁(yè)鏈接的時(shí)候,通過watch cur,子組件分發(fā) page-to 事件,通過 @page-to="loadList" 標(biāo)簽指定使用父組件 loadList 方法處理事件,父組件接收到page值然后ajax加載數(shù)據(jù),根據(jù)服務(wù)端返回計(jì)算并更新自身的 pageAll 值,因?yàn)樽咏M件prop通過 :all="pageAll" 動(dòng)態(tài)綁定了父組件的pageAll對(duì)象,所以子組件會(huì)聯(lián)動(dòng)更新。
附上一個(gè)簡(jiǎn)單的表格組件例子:
var vm = new Vue({ el: "#item_list", data: { items : [], //分頁(yè)參數(shù) pageAll:0, //總頁(yè)數(shù),根據(jù)服務(wù)端返回total值計(jì)算 perPage:10 //每頁(yè)數(shù)量 }, methods: { loadList:function(page){ var that = this; $.ajax({ url : "/getList", type:"post", data:{"page":page,"perPage":this.perPage}, dataType:"json", error:function(){alert('請(qǐng)求列表失敗')}, success:function(res){ if (res.status == 1) { that.items = res.data.list; that.perPage = res.data.perPage; that.pageAll = Math.ceil(res.data.total / that.perPage);//計(jì)算總頁(yè)數(shù) } } }); }, //初始化 init:function(){ this.loadList(1); } } }); vm.init();
感謝閱讀,希望能幫助到大家,謝謝大家對(duì)本站的支持!
- vue?組件異步加載方式(按需加載)
- 解決vue動(dòng)態(tài)路由異步加載import組件,加載不到module的問題
- 詳解vue-router的Import異步加載模塊問題的解決方案
- vue+echarts實(shí)現(xiàn)動(dòng)態(tài)繪制圖表及異步加載數(shù)據(jù)的方法
- vue awesome swiper異步加載數(shù)據(jù)出現(xiàn)的bug問題
- vue異步加載高德地圖的實(shí)現(xiàn)
- vue+webpack實(shí)現(xiàn)異步加載三種用法示例詳解
- 詳解Vue-Cli 異步加載數(shù)據(jù)的一些注意點(diǎn)
- Vue 處理異步加載順序問題之如何在Konva中確保文本在圖片之上顯示
相關(guān)文章
vue實(shí)現(xiàn)多級(jí)側(cè)邊欄的封裝
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)多級(jí)側(cè)邊欄的封裝,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-07-07vue + echarts實(shí)現(xiàn)中國(guó)省份地圖點(diǎn)擊聯(lián)動(dòng)
這篇文章主要介紹了vue + echarts實(shí)現(xiàn)中國(guó)地圖省份點(diǎn)擊聯(lián)動(dòng),需要的朋友可以參考下2022-04-04vue事件監(jiān)聽函數(shù)on中的this指針域使用
這篇文章主要介紹了vue事件監(jiān)聽函數(shù)on中的this指針域使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08Vue-CLI3.x 自動(dòng)部署項(xiàng)目至服務(wù)器的方法步驟
本教程講解的是 Vue-CLI 3.x 腳手架搭建的vue項(xiàng)目, 利用scp2自動(dòng)化部署到靜態(tài)文件服務(wù)器 Nginx,感興趣的可以了解一下2021-11-11解決axios post 后端無(wú)法接收數(shù)據(jù)的問題
今天小編就為大家分享一篇解決axios post 后端無(wú)法接收數(shù)據(jù)的問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來(lái)看看吧2019-10-10vue項(xiàng)目持久化存儲(chǔ)數(shù)據(jù)的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue項(xiàng)目持久化存儲(chǔ)數(shù)據(jù)的實(shí)現(xiàn)代碼,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來(lái)看看吧2018-10-10vue大屏自適應(yīng)的實(shí)現(xiàn)方法(cv就能用)
最近在用VUE寫大屏頁(yè)面,遇到屏幕自適應(yīng)問題,下面這篇文章主要給大家介紹了關(guān)于vue大屏自適應(yīng)的實(shí)現(xiàn)方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06Vue.js3.2響應(yīng)式部分的優(yōu)化升級(jí)詳解
這篇文章主要為大家介紹了Vue.js3.2響應(yīng)式部分的優(yōu)化升級(jí)詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07