这次给大家带来Bootstrap4与Vue2实现分页查询功能(附代码),Bootstrap4与Vue2实现分页查询功能的注意事项有哪些,下面就是实战案例,一起来看一下。
写在前面
工程为前后端分离设计,使用Nginx为前端资源服务器,同时实现后台服务的反向代理。后台为Java Web工程,使用Tomcat部署服务。
前端框架:Bootstrap4,Vue.js2
-
后台框架:spring boot,spring data JPA
开发工具: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:"/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); } }
相信看了本文案例你已经掌握了方法,更多精彩请关注php中文网其它相关文章!
推荐阅读:
以上是Bootstrap4与Vue2实现分页查询功能(附代码)的详细内容。更多信息请关注PHP中文网其他相关文章!

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

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

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

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

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

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

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


热AI工具

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

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

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

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

Atom编辑器mac版下载
最流行的的开源编辑器

Dreamweaver Mac版
视觉化网页开发工具

PhpStorm Mac 版本
最新(2018.2.1 )专业的PHP集成开发工具

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