使用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 相关文章推荐
使用EXT实现无刷新动态调用股票信息
Nov 01 Javascript
JS.findElementById()使用介绍
Sep 21 Javascript
Javascript中的delete操作符详细介绍
Jun 06 Javascript
node.js中使用socket.io的方法
Dec 15 Javascript
JavaScript导航脚本判断当前导航
Jul 12 Javascript
jsTree使用记录实例
Dec 01 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
vuex的使用及持久化state的方式详解
Jan 23 Javascript
JS实现的input选择图片本地预览功能示例
Aug 29 Javascript
微信小程序实现折线图的示例代码
Jun 07 Javascript
react实现antd线上主题动态切换功能
Aug 12 Javascript
three.js 将图片马赛克化的示例代码
Jul 31 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中日期加减法运算实现代码
2011/12/08 PHP
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
php中hashtable实现示例分享
2014/02/13 PHP
CI使用Tank Auth转移数据库导致密码用户错误的解决办法
2014/06/12 PHP
YII中assets的使用示例
2014/07/31 PHP
php rsa 加密,解密,签名,验签详解
2016/12/06 PHP
PHP自动载入类文件函数__autoload的使用方法
2019/03/25 PHP
javascript实现的网页局布刷新效果
2008/12/01 Javascript
javascript实现div浮动在网页最顶上并带关闭按钮效果实例
2013/08/13 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
基于jquery实现发送文章到手机的代码
2014/12/26 Javascript
fastclick插件导致日期(input[type=&quot;date&quot;])控件无法被触发该如何解决
2015/11/09 Javascript
Bootstrap每天必学之基础排版
2015/11/20 Javascript
jQuery操作复选框(CheckBox)的取值赋值实现代码
2017/01/10 Javascript
Angular动态添加、删除输入框并计算值实例代码
2017/03/29 Javascript
原生js中ajax访问的实例详解
2017/09/19 Javascript
JS实现关键词高亮显示正则匹配
2018/06/22 Javascript
vue的for循环使用方法
2019/02/12 Javascript
解决vue下载后台传过来的乱码流的问题
2020/12/05 Vue.js
使用beaker让Facebook的Bottle框架支持session功能
2015/04/23 Python
Python 绘制酷炫的三维图步骤详解
2019/07/12 Python
flask框架json数据的拿取和返回操作示例
2019/11/28 Python
浅谈tensorflow 中tf.concat()的使用
2020/02/07 Python
详解Python 中的容器 collections
2020/08/17 Python
Python 图片处理库exifread详解
2021/02/25 Python
解释一下钝化(Swap out)
2016/12/26 面试题
工商管理本科毕业生求职信范文
2013/10/05 职场文书
高中语文课后反思
2014/04/27 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
会展策划与管理专业求职信
2014/06/09 职场文书
党的群众路线教育实践活动总结报告
2014/07/03 职场文书
普通话演讲稿
2014/09/03 职场文书
投诉书格式范本
2015/07/02 职场文书
求职信:会计求职的写作技巧
2019/04/24 职场文书
python双向链表实例详解
2022/05/25 Python
MySQL的表级锁,行级锁,排它锁和共享锁
2022/07/15 MySQL