欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-03-30 18:01:20
利用vue.js实现数据库分页,供大家参考,具体内容如下 最新项目有一个分页功能,画面风格很简朴给的样图就用【1】表示页码了, 因此,我没有上网上找插件,自己简单的做...

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

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

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

除了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;就可以了。从代码到描述都很简陋,还请大家对我的错误不足进行指正。

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