使用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 相关文章推荐
javascript控制frame,iframe的src属性代码
Dec 31 Javascript
Jquery Ajax学习实例 向页面发出请求,返回XML格式数据
Mar 14 Javascript
JQUERY1.6 使用方法四 检测浏览器
Nov 23 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
Dec 26 Javascript
使用JavaScript动态设置样式实现代码及演示动画
Jan 25 Javascript
jQuery $.extend()用法总结
Jun 15 Javascript
提升PHP安全:8个必须修改的PHP默认配置
Nov 17 Javascript
JavaScript处理解析JSON数据过程详解
Sep 11 Javascript
Bootstrap每天必学之按钮
Nov 26 Javascript
vue loadmore 组件滑动加载更多源码解析
Jul 19 Javascript
Node.js利用断言模块assert进行单元测试的方法
Sep 28 Javascript
JavaScript如何对图片进行黑白化
Apr 10 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
MYSQL环境变量设置方法
2007/01/15 PHP
将时间以距今多久的形式表示,PHP,js双版本
2012/09/25 PHP
PHP多线程类及用法实例
2014/12/03 PHP
PHP中开启gzip压缩的2种方法
2015/01/31 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
Javascript - HTML的request类
2007/01/09 Javascript
prototype Element学习笔记(篇二)
2008/10/26 Javascript
再说AutoComplete自动补全之实现原理
2011/11/05 Javascript
JS继承--原型链继承和类式继承
2013/04/08 Javascript
js+css实现导航效果实例
2015/02/10 Javascript
JavaScript父子窗体间的调用方法
2015/03/31 Javascript
清除浏览器缓存的几种方法总结(必看)
2016/12/09 Javascript
JQuery页面随滚动条动态加载效果的简单实现(推荐)
2017/02/08 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
Vue ElementUi同时校验多个表单(巧用new promise)
2018/06/06 Javascript
JavaScript键盘事件响应顺序详解
2019/09/30 Javascript
vue 实现element-ui中的加载中状态
2020/11/11 Javascript
如何管理Vue中的缓存页面
2021/02/06 Vue.js
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
Windows环境下python环境安装使用图文教程
2018/03/13 Python
查看python安装路径及pip安装的包列表及路径
2019/04/03 Python
如何使用Python标准库进行性能测试
2019/06/25 Python
详解django使用include无法跳转的解决方法
2020/03/19 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
Keras 使用 Lambda层详解
2020/06/10 Python
matplotlib bar()实现百分比堆积柱状图
2021/02/24 Python
高等教育学自荐书范文
2014/02/10 职场文书
党组织公开承诺书
2014/03/29 职场文书
材料专业大学毕业生自荐书
2014/07/02 职场文书
2014年企业党支部工作总结
2014/12/04 职场文书
优秀大学生事迹材料
2014/12/24 职场文书
考试没考好检讨书
2015/05/06 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
Linux中如何安装并部署Redis
2022/04/18 Servers