使用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 相关文章推荐
extjs 学习笔记(三) 最基本的grid
Oct 15 Javascript
使用jquery插件实现图片延迟加载技术详细说明
Mar 12 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
详解JavaScript中的Unescape()和String() 函数
Nov 09 Javascript
AngularJS 工作原理详解
Aug 18 Javascript
使用vue-cli3新建一个项目并写好基本配置(推荐)
Apr 24 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 jQuery
简单谈谈javascript高级特性
Sep 04 Javascript
js实现小时钟效果
Mar 25 Javascript
JS访问对象两种方式区别解析
Aug 29 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
火影忍者:这才是千手柱间和扉间的真正死因,角都就比较搞笑了!
2020/03/10 日漫
用PHP调用Oracle存储过程的方法
2008/09/12 PHP
php转换颜色为其反色的方法
2015/04/27 PHP
获取Javscript执行函数名称的方法
2006/12/22 Javascript
如何在标题栏显示框架内页面的标题
2007/02/03 Javascript
jQuery数组处理方法汇总
2011/06/20 Javascript
js实现类似MSN提示的页面效果代码分享
2015/08/24 Javascript
基于jQuery实现的QQ表情插件
2015/08/25 Javascript
jquery按回车键实现表单提交的简单实例
2016/05/25 Javascript
浅析vue数据绑定
2017/01/17 Javascript
JS排序之冒泡排序详解
2017/04/08 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
Vue.js做select下拉列表的实例(ul-li标签仿select标签)
2018/03/02 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
2018/10/23 Javascript
用jQuery将JavaScript对象转换为querystring查询字符串的方法
2018/11/12 jQuery
JavaScript使用闭包模仿块级作用域操作示例
2019/01/21 Javascript
vue3修改link标签默认icon无效问题详解
2019/10/09 Javascript
js实现旋转木马轮播图效果
2020/01/10 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
python检查字符串是否是正确ISBN的方法
2015/07/11 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
python+opencv实现阈值分割
2018/12/26 Python
Python基本语法之运算符功能与用法详解
2019/10/22 Python
Pycharm中Python环境配置常见问题解析
2020/01/16 Python
Python QTimer实现多线程及QSS应用过程解析
2020/07/11 Python
Python3爬虫mitmproxy的安装步骤
2020/07/29 Python
Web前端页面跳转并取到值
2017/04/24 HTML / CSS
智利最大的网上商店:Linio智利
2016/11/24 全球购物
viagogo意大利票务平台:演唱会、体育比赛、戏剧门票
2018/01/26 全球购物
为您搜罗全球潮流時尚品牌:HBX
2019/12/04 全球购物
工程造价管理专业大专生求职信
2013/10/06 职场文书
学雷锋志愿服务月活动总结
2014/03/09 职场文书
人民教师求职自荐信
2014/03/12 职场文书
医生个人年终总结
2015/02/28 职场文书
高中军训感想
2015/08/07 职场文书
SQL写法--行行比较
2021/08/23 SQL Server