使用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 相关文章推荐
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
Jun 26 Javascript
js简单实现HTML标签Select联动带跳转
Oct 23 Javascript
javascript获取url上某个参数的方法
Nov 08 Javascript
JQuery radio(单选按钮)操作方法汇总
Apr 15 Javascript
Juery解决tablesorter中文排序和字符范围的方法
May 06 Javascript
vue.js指令v-for使用及索引获取
Nov 03 Javascript
理解javascript中的闭包
Jan 11 Javascript
使用Node.js实现ORM的一种思路详解(图文)
Oct 24 Javascript
微信小程序实现自上而下字幕滚动
Jul 14 Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 Javascript
浅谈react-router@4.0 使用方法和源码分析
Jun 04 Javascript
React+TypeScript+webpack4多入口配置详解
Aug 08 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删除指定目录中的所有目录及文件的方法
2015/02/26 PHP
PHP中error_reporting函数用法详细介绍
2017/06/11 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
JavaScript 对象模型 执行模型
2009/12/06 Javascript
JQuery入门——用映射方式绑定不同事件应用示例
2013/02/05 Javascript
用jQuery实现一些导航条切换,显示隐藏的实例代码
2013/06/08 Javascript
js实现页面转发功能示例代码
2013/08/05 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
node.js中的path.delimiter方法使用说明
2014/12/09 Javascript
jQuery实现图片向左向右切换效果的简单实例
2016/05/18 Javascript
浅谈js中的in-for循环
2016/06/28 Javascript
用iframe实现不刷新整个页面上传图片的实例
2016/11/18 Javascript
JavaScript中校验银行卡号的实现代码
2016/12/19 Javascript
jQuery加密密码到cookie的实现代码
2017/04/18 jQuery
Vue form 表单提交+ajax异步请求+分页效果
2017/04/22 Javascript
使用jQuery实现掷骰子游戏
2019/10/24 jQuery
VUE.CLI4.0配置多页面入口的实现
2019/11/25 Javascript
vue中音频wavesurfer.js的使用方法
2020/02/20 Vue.js
JS Thunk 函数的含义和用法实例总结
2020/04/08 Javascript
详解三种方式在React中解决绑定this的作用域问题并传参
2020/08/18 Javascript
python错误处理详解
2014/09/28 Python
Python利用BeautifulSoup解析Html的方法示例
2017/07/30 Python
python控制windows剪贴板,向剪贴板中写入图片的实例
2018/05/31 Python
python中cPickle类使用方法详解
2018/08/27 Python
np.dot()函数的用法详解
2020/01/17 Python
Python django框架开发发布会签到系统(web开发)
2020/02/12 Python
Python实现敏感词过滤的4种方法
2020/09/12 Python
CSS改变网页中鼠标选中文字背景颜色例子
2014/04/23 HTML / CSS
Banggood官网:面向全球客户的综合商城
2017/04/19 全球购物
简述synchronized和java.util.concurrent.locks.Lock的异同
2014/12/08 面试题
如何通过 CSS 写出火焰效果
2021/03/24 HTML / CSS
简历自我评价怎么写呢?
2014/01/06 职场文书
开业庆典策划方案
2014/02/18 职场文书
杜甫草堂导游词
2015/02/03 职场文书
世界遗产的导游词
2015/02/13 职场文书
低版本Druid连接池+MySQL驱动8.0导致线程阻塞、性能受限
2021/07/01 MySQL