基于vue.js实现分页查询功能

这篇文章主要为大家详细介绍了基于vue.js实现分页查询功能，具有一定的参考价值，可以用来参考一下。

感兴趣的小伙伴，下面一起跟随四海网的小编两巴掌来看看吧！

利用vue.js实现数据库分页，供大家参考，具体内容如下

最新项目有一个分页功能，画面风格很简朴给的样图就用【1】表示页码了， 因此，我没有上网上找插件，自己简单的做了一个。作为菜鸟，代码可能有点青涩，请见谅。  

 【图片暂缺】

除了vue我还引用了Bootstrap的类和图标

 

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; 
} 
//设置显示的页码下限 
function setShowdown() { 
 listData.showdown = listData.page + 2; 
} 
//设置显示的页码上限 
function setShowup() { 
 listData.showup = listData.page - 2; 
}

这样通过把选中的页码传到后台 计算出 limit 开始条数的值 如显示20条 开始值就是 （page-1）*20;就可以了。从代码到描述都很简陋，还请大家对我的错误不足进行指正。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持四海网。

本文来自：http://www.q1010.com/184/7096-0.html

注：关于基于vue.js实现分页查询功能的内容就先介绍到这里，更多相关文章的可以留意四海网的其他信息。

关键词：vue.js