使用Bootstrap4 + Vue2实现分页查询的示例代码


Posted in Javascript onDecember 21, 2017

写在前面

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

  1. 前端框架:Bootstrap4,Vue.js2
  2. 后台框架:spring boot,spring data JPA
  3. 开发工具:IntelliJ IDEA,Maven

实现效果:

使用Bootstrap4 + Vue2实现分页查询的示例代码

会员信息

如何使用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);
 }
}

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

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

Javascript 相关文章推荐
利用js对象弹出一个层
Mar 26 Javascript
jQuery Form 页面表单提交的小例子
Nov 15 Javascript
FF IE浏览器修改标签透明度的方法
Jan 27 Javascript
js查找节点的方法小结
Jan 13 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
详解js中的apply与call的用法
Jul 30 Javascript
JavaScript基于DOM操作实现简单的数学运算功能示例
Jan 16 Javascript
JavaScript实现二分查找实例代码
Feb 22 Javascript
Vue v2.5 调整和更新不完全问题
Oct 24 Javascript
Vue项目添加动态浏览器头部title的方法
Jul 11 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
Jan 08 Javascript
一分钟学会JavaScript中的try-catch
Dec 14 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 #Javascript
代码详解Vuejs响应式原理
Dec 20 #Javascript
详解Javascript 中的 class、构造函数、工厂函数
Dec 20 #Javascript
在一个页面实现两个zTree联动的方法
Dec 20 #Javascript
浅谈基于Vue.js的移动组件库cube-ui
Dec 20 #Javascript
Angular2+如何去除url中的#号详解
Dec 20 #Javascript
JS基于递归实现网页版计算器的方法分析
Dec 20 #Javascript
You might like
PHP 裁剪图片成固定大小代码方法
2009/09/09 PHP
PHP中基于ts与nts版本- vc6和vc9编译版本的区别详解
2013/04/26 PHP
PHP多文件上传类实例
2015/03/07 PHP
PHP的pcntl多进程用法实例
2015/03/19 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
js getElementsByTagName的简写方式
2010/06/27 Javascript
只需20行代码就可以写出CSS覆盖率测试脚本
2013/04/24 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
jquery if条件语句的写法
2016/05/19 Javascript
最实用的jQuery分页插件
2016/10/09 Javascript
AngularJS实现的JSONP跨域访问数据传输功能详解
2017/07/20 Javascript
vue使用ajax获取后台数据进行显示的示例
2018/08/09 Javascript
浅谈vue异步数据影响页面渲染
2019/10/29 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
Python多线程编程(三):threading.Thread类的重要函数和方法
2015/04/05 Python
Python运算符重载用法实例分析
2015/06/01 Python
Python实现的合并两个有序数组算法示例
2019/03/04 Python
纯css3制作网站后台管理面板
2014/12/30 HTML / CSS
HTML5 移动页面自适应手机屏幕四类方法总结
2017/08/17 HTML / CSS
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
英国布鲁姆精品店:Bloom Boutique
2018/03/01 全球购物
Made in Design意大利:现代家具、名家灯具和装饰
2020/10/27 全球购物
中专毕业自我鉴定
2013/10/16 职场文书
求职自荐信范文格式
2013/11/29 职场文书
优秀研究生自我鉴定
2013/12/04 职场文书
党校培训思想汇报
2013/12/30 职场文书
新教师培训心得体会
2014/09/02 职场文书
工资收入证明样本(5篇)
2014/09/16 职场文书
老兵退伍标语
2014/10/07 职场文书
个人投资合作协议书
2014/10/12 职场文书
2015年先进个人自荐书
2015/03/24 职场文书
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android
Go语言编译原理之源码调试
2022/08/05 Golang