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

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

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

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

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

除了vue我還引用了Bootstrap的類和圖標(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, 
//選中的頁號 
page : 1, 
//顯示頁碼下限 
showdown : 0, 
//顯示頁碼上限 
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(); 
}); 
//選中的頁號 
function setpage(i) { 
 listData.page = i; 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
} 
//向上翻一頁 
function up() { 
 if (listData.page > 1) { 
 listData.page = listData.page - 1; 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
} 
} 
//向下翻一頁 
function down() { 
 if (listData.page < listData.pages) { 
 listData.page = listData.page + 1; 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
 } 
} 
//直接到首頁 
function firstpg() { 
 if (listData.page > 1) { 
 listData.page = 1; 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
 } 
} 
//直接到尾頁 
function lastpg() { 
 if (listData.page < listData.pages) { 
 listData.page = listData.pages; 
 setShowdown(); 
 setShowup(); 
 initAjax(); 
 } 
} 
//往前翻三頁 
function showmore1() { 
 listData.showdown -= 3; 
 listData.showup -= 3; 
} 
//往后翻三頁 
function showmore2() { 
 listData.showdown += 3; 
 listData.showup += 3; 
} 
//設(shè)置顯示的頁碼下限 
function setShowdown() { 
 listData.showdown = listData.page + 2; 
} 
//設(shè)置顯示的頁碼上限 
function setShowup() { 
 listData.showup = listData.page - 2; 
}

這樣通過把選中的頁碼傳到后臺計算出 limit 開始條數(shù)的值如顯示20條開始值就是（page-1）*20;就可以了。從代碼到描述都很簡陋，還請大家對我的錯誤不足進行指正。

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

您可能感興趣的文章: