最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
使用Bootstrap4 + Vue2实现分页查询的示例代码
时间:2017-12-26 编辑:猪哥 来源:一聚教程网
写在前面
工程为前后端分离设计,使用Nginx为前端资源服务器,同时实现后台服务的反向代理。后台为Java Web工程,使用Tomcat部署服务。
- 前端框架:Bootstrap4,Vue.js2
- 后台框架:spring boot,spring data JPA
- 开发工具:IntelliJ IDEA,Maven
实现效果:
会员信息
如何使用Bootstrap+Vue来实现动态table,数据的新增删除等操作,请查看使用Bootstrap + Vue.js实现表格的动态展示、新增和删除 。交代完毕,本文主题开始。
一、使用Bootstrap搭建表格
表格区
序号 会员号 姓名 手机号 办公电话 邮箱地址 状态 {{pageNow*10 + index+1}} {{user.id}} {{user.username}} {{user.mobile}} {{user.officetel}} {{user.email}} 正常 注销
分页区
二、初始化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代码:
三、使用JPA实现分页查询
controller接收请求
/** * 用户相关请求控制器 * @author louie * @date 2017-12-19 */ @RestController @RequestMapping("/user") public class UserController { @Autowired private UserService userService; /** * 分页获取用户 * @param pageNow 当前页码 * @return 分页用户数据 */ @RequestMapping("/{pageNow}") public PagefindByPage(@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 PagefindUserPaging(Integer pageNow) { Pageable pageable = new PageRequest(pageNow,perPage,Sort.Direction.DESC,"id"); return userRepository.findAll(pageable); } }
相关文章
- js实现音乐播放器代码展示 10-12
- js实现图片查看器代码展示 10-12
- JS中switch的四种写法介绍 10-12
- js实现新闻轮播效果教程 10-11
- JS实现简单的图片切换功能教程 10-11
- js实现下拉刷新和上拉加载解析 09-28