您好,登录后才能下订单哦!
小编给大家分享一下如何使用Bootstrap4 + Vue2实现分页查询,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!
写在前面
工程为前后端分离设计,使用Nginx为前端资源服务器,同时实现后台服务的反向代理。后台为Java Web工程,使用Tomcat部署服务。
前端框架:Bootstrap4,Vue.js2
后台框架:spring boot,spring data JPA
开发工具:IntelliJ IDEA,Maven
实现效果:
会员信息
如何使用Bootstrap+Vue来实现动态table,数据的新增删除等操作,请查看使用Bootstrap + Vue.js实现表格的动态展示、新增和删除 。交代完毕,本文主题开始。
一、使用Bootstrap搭建表格
表格区
<div 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> </div>
分页区
<div 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> </div>
二、初始化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分页查询
@Service public 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); } }
以上是“如何使用Bootstrap4 + Vue2实现分页查询”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注亿速云行业资讯频道!
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。