本篇文章主要介绍了使用bootstrap4 + vue2实现分页查询的示例代码，现在分享给大家，也给大家做个参考。
写在前面
工程为前后端分离设计，使用nginx为前端资源服务器，同时实现后台服务的反向代理。后台为java web工程，使用tomcat部署服务。
前端框架：bootstrap4，vue.js2
后台框架：spring boot，spring data jpa
开发工具：intellij idea，maven
实现效果：
会员信息
如何使用bootstrap+vue来实现动态table，数据的新增删除等操作，请查看使用bootstrap + vue.js实现表格的动态展示、新增和删除 。交代完毕，本文主题开始。
一、使用bootstrap搭建表格
表格区
<p class="row"> <table class="table table-hover table-striped table-bordered table-sm"> <thead class=""> <tr> <th><input type="checkbox"></th> <th>序号</th> <th>会员号</th> <th>姓名</th> <th>手机号</th> <th>办公电话</th> <th>邮箱地址</th> <th>状态</th> </tr> </thead> <tbody> <tr v-for="(user,index) in userlist"> <td><input type="checkbox" :value="index" v-model="checkedrows"></td> <td>{{pagenow*10 + index+1}}</td> <td>{{user.id}}</td> <td>{{user.username}}</td> <td>{{user.mobile}}</td> <td>{{user.officetel}}</td> <td>{{user.email}}</td> <td v-if="user.disenable == 0">正常</td> <td v-else>注销</td> </tr> </tbody> </table> </p>
分页区
<p class="row mx-auto"> <ul class="nav justify-content-center pagination-sm"> <li class="page-item"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link"><i class="fa fa-fast-backward" @click="switchtopage(0)"> </i></a> </li> <li class="page-item"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link"><i class="fa fa-backward" @click="switchtopage(pagenow-1)"></i></a> </li> <li class="page-item" v-for="n in totalpages" :class="{active:n==pagenow+1}"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" @click="switchtopage(n-1)" class="page-link">{{n}}</a> </li> <li class="page-item"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link"><i class="fa fa-forward" @click="switchtopage(pagenow+1)"></i></a> </li> <li class="page-item"> <a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="page-link"><i class="fa fa-fast-forward" @click="switchtopage(totalpages-1)"></i></a> </li> </ul> </p>
二、初始化vue对象及数据
创建vue对象
var vueapp = new vue({ el:"#vueapp", data:{ userlist:[], perpage:10, pagenow:0, totalpages:0, checkedrows:[] }, methods:{ switchtopage:function (pageno) { if (pageno < 0 || pageno >= this.totalpages){ return false; } getuserbypage(pageno); } } });
初始化数据
function getuserbypage(pagenow) { $.ajax({ url:"/user/"+pagenow, success:function (datas) { vueapp.userlist = datas.content; vueapp.totalpages = datas.totalpages; vueapp.pagenow = pagenow; }, error:function (res) { console.log(res); } }); }
完整js代码：
<script> var vueapp = new vue({ el:"#vueapp", data:{ userlist:[], perpage:10, pagenow:0, totalpages:0, checkedrows:[] }, methods:{ switchtopage:function (pageno) { if (pageno < 0 || pageno >= this.totalpages){ return false; } getuserbypage(pageno); } } }); getuserbypage(0); function getuserbypage(pagenow) { $.ajax({ url:"/user/"+pagenow, success:function (datas) { vueapp.userlist = datas.content; vueapp.totalpages = datas.totalpages; vueapp.pagenow = pagenow; }, error:function (res) { console.log(res); } }); }</script>
三、使用jpa实现分页查询
controller接收请求
/** * 用户相关请求控制器 * @author louie * @date 2017-12-19 */@restcontroller@requestmapping("/user")public class usercontroller { @autowired private userservice userservice; /** * 分页获取用户 * @param pagenow 当前页码 * @return 分页用户数据 */ @requestmapping("/{pagenow}") public page<user> findbypage(@pathvariable integer pagenow){ return userservice.finduserpaging(pagenow); }}
jpa分页查询
@servicepublic class userserviceimpl implements userservice { @value("${self.louie.per-page}") private integer perpage; @autowired private userrepository userrepository; @override public page<user> finduserpaging(integer pagenow) { pageable pageable = new pagerequest(pagenow,perpage,sort.direction.desc,"id"); return userrepository.findall(pageable); }}
好了，至此功能完成，工程代码已在github中分享，您可以 点击查看或下载 ，拥抱开源，共享让世界更美好。
上面是我整理给大家的，希望今后会对大家有帮助。
相关文章：
使用jquery+css如何实现table表格
通过nodejs使用http模块发送请求（详细教程）
使用angular如何实现国际化（详细教程）
用jquery如何实现表单验证，具体应该怎么做？
使用vue如何设置多个class
以上就是在bootstrap4 + vue2中如何实现分页查询的详细内容。