在Bootstrap4+Vue2中如何实现分页查询

写在前面

工程为前后端分离设计，使用Nginx为前端资源服务器，同时实现后台服务的反向代理。后台为Java Web工程，使用Tomcat部署服务。

1. 前端框架：Bootstrap4，Vue.js2

2. 后台框架：spring boot，spring data JPA

3. 开发工具：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分页查询

@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);
 }
}

好了，至此功能完成，工程代码已在GitHub中分享，您可以 点击查看或下载 ，拥抱开源，共享让世界更美好。

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：

使用jQuery+CSS如何实现table表格

通过nodejs使用http模块发送请求（详细教程）

使用Angular如何实现国际化（详细教程）

用JQuery如何实现表单验证，具体应该怎么做？

使用Vue如何设置多个Class