搜索
首页web前端js教程Bootstrap4与Vue2实现分页查询功能(附代码)

这次给大家带来Bootstrap4与Vue2实现分页查询功能(附代码),Bootstrap4与Vue2实现分页查询功能的注意事项有哪些,下面就是实战案例,一起来看一下。

写在前面

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

  1. 前端框架:Bootstrap4,Vue.js2

  2. 后台框架:spring boot,spring data JPA

  3. 开发工具:IntelliJ IDEA,Maven

如何使用Bootstrap+Vue来实现动态table,数据的新增删除等操作,请查看使用Bootstrap + Vue.js实现表格的动态展示、新增和删除 。交代完毕,本文主题开始。

一、使用Bootstrap搭建表格

表格区

<p 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>
  </p>

分页区

<p 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>
  </p>

二、初始化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:&quot;/user/&quot;+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);
 }
}

相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!

推荐阅读:

webpack构建多页面应用的步骤分析

axios如何给上传图片添加进度条

vue使用axios时this指向哪里

以上是Bootstrap4与Vue2实现分页查询功能(附代码)的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
vue2与vue3中的生命周期执行顺序有什么区别vue2与vue3中的生命周期执行顺序有什么区别May 16, 2023 pm 09:40 PM

vue2与vue3中生命周期执行顺序区别生命周期比较vue2中执行顺序beforeCreate=>created=>beforeMount=>mounted=>beforeUpdate=>updated=>beforeDestroy=>destroyedvue3中执行顺序setup=>onBeforeMount=>onMounted=>onBeforeUpdate=>onUpdated=>onBeforeUnmount=&g

PHP实现IP地址查询功能PHP实现IP地址查询功能Jun 22, 2023 pm 11:22 PM

随着网络的快速发展,IP地址成为了网络通信中不可或缺的一环。在进行网络安全监测、流量管理、电商广告定向投放等方面,IP地址的信息非常重要。因此,为了方便用户查询IP地址/域名信息,许多网站提供了IP地址查询功能。本篇文章将介绍如何用PHP实现IP地址查询功能,供读者参考。一、何为IP地址?IP地址(InternetProtocolAddress)即网络协

快速搞懂Vue2 diff算法(图文详解)快速搞懂Vue2 diff算法(图文详解)Mar 17, 2023 pm 08:23 PM

diff算法是一种通过同层的树节点进行比较的高效算法,避免了对树进行逐层搜索遍历。那么大家对diff算法吗有多少了解?下面本篇文章就来带大家深入解析下vue2的diff算法,希望对大家有所帮助!

PHP开发技巧:如何实现数据表关联和查询功能PHP开发技巧:如何实现数据表关联和查询功能Sep 20, 2023 pm 04:28 PM

PHP开发技巧:实现数据表关联和查询功能在PHP开发中,经常需要处理数据库相关的操作,其中包括数据表之间的关联和查询。本文将介绍如何利用PHP来实现数据表的关联和查询功能,并提供具体的代码示例。一、数据表关联的概念数据表关联是指通过某种规则将两个或多个数据表中的记录进行连接,获取关联表的数据信息。常见的数据表关联方式包括一对一关联、一对多关联和多对多关联。一

教程:Java开发高德地图地理围栏报警数据查询功能的实现步骤教程:Java开发高德地图地理围栏报警数据查询功能的实现步骤Jul 29, 2023 pm 06:45 PM

教程:Java开发高德地图地理围栏报警数据查询功能的实现步骤引言:高德地图是一款功能强大的地理信息服务平台,提供了丰富的地图数据和服务,包括地理围栏功能。地理围栏是一种根据地理坐标系范围进行约束的功能,可以实现地域、区域等范围的监控和报警。在本教程中,我们将介绍如何使用Java开发高德地图地理围栏报警数据查询功能,并提供相应的代码示例。步骤1:申请高德地图开

如何利用PHP开发一个简单的IP地址查询功能如何利用PHP开发一个简单的IP地址查询功能Sep 25, 2023 am 09:52 AM

如何利用PHP开发一个简单的IP地址查询功能在网络中,IP地址是唯一标识一个设备的数字地址。有时候我们需要获取一个IP地址的相关信息,比如所属地理位置、ISP供应商等。在本文中,我们将使用PHP来开发一个简单的IP地址查询功能。实现这个功能需要借助第三方的IP地址查询服务API,通过向该API发送HTTP请求,获取IP地址的相关信息。以下是具体的步骤和代码示

如何利用PHP开发一个简单的实时天气查询功能如何利用PHP开发一个简单的实时天气查询功能Sep 24, 2023 pm 12:03 PM

如何利用PHP开发一个简单的实时天气查询功能前言:随着科技的不断发展,人们对天气的关注也越来越多。因此,开发一个实时天气查询功能的网站或应用程序成为了一项非常热门的需求。本文以PHP作为开发语言,介绍如何利用PHP开发一个简单的实时天气查询功能,并提供具体的代码示例。一、获取天气数据要实现天气查询功能,首先需要获得实时天气数据。目前市面上有很多天气API供开

聊聊Vue2和Vue3中怎么设置404界面聊聊Vue2和Vue3中怎么设置404界面Feb 17, 2023 pm 02:25 PM

本篇文章带大家进行Vue学习,聊聊Vue2和Vue3中设置404界面的方法,希望对大家有所帮助!

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
3 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

Dreamweaver Mac版

Dreamweaver Mac版

视觉化网页开发工具

PhpStorm Mac 版本

PhpStorm Mac 版本

最新(2018.2.1 )专业的PHP集成开发工具

SecLists

SecLists

SecLists是最终安全测试人员的伙伴。它是一个包含各种类型列表的集合,这些列表在安全评估过程中经常使用,都在一个地方。SecLists通过方便地提供安全测试人员可能需要的所有列表,帮助提高安全测试的效率和生产力。列表类型包括用户名、密码、URL、模糊测试有效载荷、敏感数据模式、Web shell等等。测试人员只需将此存储库拉到新的测试机上,他就可以访问到所需的每种类型的列表。