快捷導(dǎo)航

基于vue.js實(shí)現(xiàn)分頁(yè)查詢功能

更新時(shí)間：2018年12月29日 09:46:05 作者：杭凇

這篇文章主要為大家詳細(xì)介紹了基于vue.js實(shí)現(xiàn)分頁(yè)查詢功能，vue.js實(shí)現(xiàn)數(shù)據(jù)庫(kù)分頁(yè)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

利用vue.js實(shí)現(xiàn)數(shù)據(jù)庫(kù)分頁(yè)，供大家參考，具體內(nèi)容如下

最新項(xiàng)目有一個(gè)分頁(yè)功能，畫(huà)面風(fēng)格很簡(jiǎn)樸給的樣圖就用【1】表示頁(yè)碼了，因此，我沒(méi)有上網(wǎng)上找插件，自己簡(jiǎn)單的做了一個(gè)。作為菜鳥(niǎo)，代碼可能有點(diǎn)青澀，請(qǐng)見(jiàn)諒。

除了vue我還引用了Bootstrap的類(lèi)和圖標(biāo)

html

<div class="paging">
  <ul class="pagination" style="margin: 13px">
  <li class="page-li" v-if="page>1"><a href="javascript:void(0);" @click="firstpg()" style="border: 0px;"><span class="glyphicon glyphicon-step-backward"></span></a></li>
  <li class="page-li" v-else></li>
  <li class="page-li" v-if="page>1"><a href="javascript:void(0);" @click="up()" style="border: 0px;"><span class="glyphicon glyphicon-chevron-left"></span></a></li>
  <li class="page-li" v-else></li>
  <li class="page-li" v-if="showup>0"><a href="javascript:void(0);" @click="showmore1()" style="border: 0px;">...</a></li>
  <li class="page-li" v-else></li>
  <li v-for="i in pages" v-if="i>showup&&i<showdown"><a href="javascript:void(0);" @click="setpage(i)" :class="{colorred:i==page}" style="border: 0px;">[{{i}}]</a></li>
  <li class="page-li" v-if="showdown<=pages"><a href="javascript:void(0);" @click="showmore2()" style="border: 0px;">...</a></li>
  <li class="page-li" v-else></li>
  <li class="page-li" v-if="page<pages"><a href="javascript:void(0);" @click="down()" style="border: 0px;"><span class="glyphicon glyphicon-chevron-right"></span></a></li>
  <li class="page-li" v-else></li>
  <li class="page-li" v-if="page<pages"><a href="javascript:void(0);" @click="lastpg()" style="border: 0px;"><span class="glyphicon glyphicon-step-forward"></span></a></li>
  <li class="page-li" v-else></li>
  </ul>
 </div>

js

const listData = { 
initcount : 0, 
//選中的頁(yè)號(hào) 
page : 1, 
//顯示頁(yè)碼下限 
showdown : 0, 
//顯示頁(yè)碼上限 
showup : 0, 
 }; 
$(function() { 
 new Vue({ 
 el : ‘#manageArea', 
 data : listData, 
 methods : { 
 setpage : setpage, 
 up : up, 
 down : down, 
 firstpg : firstpg, 
 lastpg : lastpg, 
 showmore1 : showmore1, 
 showmore2 : showmore2, 
 }, 
}); 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
}); 
//選中的頁(yè)號(hào) 
function setpage(i) { 
 listData.page = i; 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
} 
//向上翻一頁(yè) 
function up() { 
 if (listData.page > 1) { 
 listData.page = listData.page - 1; 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
} 
} 
//向下翻一頁(yè) 
function down() { 
 if (listData.page < listData.pages) { 
 listData.page = listData.page + 1; 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
 } 
} 
//直接到首頁(yè) 
function firstpg() { 
 if (listData.page > 1) { 
 listData.page = 1; 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
 } 
} 
//直接到尾頁(yè) 
function lastpg() { 
 if (listData.page < listData.pages) { 
 listData.page = listData.pages; 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
 } 
} 
//往前翻三頁(yè) 
function showmore1() { 
 listData.showdown -= 3; 
 listData.showup -= 3; 
} 
//往后翻三頁(yè) 
function showmore2() { 
 listData.showdown += 3; 
 listData.showup += 3; 
} 
//設(shè)置顯示的頁(yè)碼下限 
function setShowdown() { 
 listData.showdown = listData.page + 2; 
} 
//設(shè)置顯示的頁(yè)碼上限 
function setShowup() { 
 listData.showup = listData.page - 2; 
}

這樣通過(guò)把選中的頁(yè)碼傳到后臺(tái) 計(jì)算出 limit 開(kāi)始條數(shù)的值如顯示20條開(kāi)始值就是（page-1）*20;就可以了。從代碼到描述都很簡(jiǎn)陋，還請(qǐng)大家對(duì)我的錯(cuò)誤不足進(jìn)行指正。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: