一、后台代码:

  1.1 controller层代码

@RequestMapping("/xxxxxx")
public String showInformationCode(String pageNum ,Model model,HttpServletRequest request){
String id = (String)request.getSession().getAttribute("Id");
if(pageNum == null){
pageNum="1";
}
int parseInt = Integer.parseInt(pageNum);
if (StringUtils.isBlank(id)) {
return null;
}
Page<Test> selectTestListById = informationService.selectTestListById(id ,parseInt);//jpa的分页查询,parseInt(第几页)
model.addAttribute("selectTestListById ",selectTestListById );
return "test";
}

  1.2 service层代码

public static final int PAGE_SIZE = 10;  //全局变量PAGE_SIZE(每页显示的数据条数) 

/**
* 分页查询
* @param csdbId
* @param pageable
* @return
*/
public Page<Test> selectTestListByCsdbId(String id ,int pageNumber) {
PageRequest buildPageRequest = BuildPageRequest(pageNumber, PAGE_SIZE);
Page<Test> findById = testMapper.findById(id, buildPageRequest);
return findById ;
} public static PageRequest buildPageRequest(int pageNumber, int pagzSize){
return new PageRequest(pageNumber - 1, pagzSize, null);
}

  1.3 mapper层代码

public interface CsdbSetDmInformationCodeMapper extends JpaRepository<CsdbSetDmInformationCode, String>{

  /**
   * 分页
   */
Page<Test> findById(String id ,Pageable pageable); //批量删除
@Transactional
@Modifying
@Query(value="delete from tablre where id in ?1 ",nativeQuery=true)
int deleteByPrimaryKeys(List<String> ids); }

这样传入前台的数据就只有10条,直到下一次请求的到来,在根据传入的pageNum(页数)来确定传入前台的数据(eg:每页的条数我是通过全局变量写死了的,可以自行修改)

二、前台使用layui的layPage插件来实现分页

  2.1 首先要在页面上引入layui的js和css(也可直接引用layPage.js),layui的下载地址:http://res.layui.com/download/layui/layui-v2.0.2.zip

  2.2 前台test.html页面

<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-4.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>information code</title>
<link rel="stylesheet" th:href="@{/libs/plugin/layui/css/layui.css}">
<link rel="stylesheet" th:href="@{/css/test.css}">
</head>
<body>
<div id="warpper">
<div id="informationCode">
<table class="bordered">
<thead>
<tr>
<th>
<input type="checkbox" class="check-all">
</th>
<th>Information Code</th>
<th>InfoName</th>
<th>Front Matter Routine</th>
</tr>
</thead>
<tbody>
<tr th:each = "informationCode : ${selectTestListById.content}" th:id="${informationCode.id}">
<td><input type="checkbox" th:value="${informationCode.id}" name="idCheckbox"></td>
<td class="informationcode"><input type="text" class="input-style" th:value="${informationCode.informationcode}" readonly="readonly"/></td>
<td class="infoname"><input type="text" class="input-style" th:value="${informationCode.infoname}"/></td>
</tr>
</tbody>
</table> <div id="pages">
</div>
<input type="hidden" th:value="${informationCodeList.TotalPages}" id="pageTotal"> <!-- 总条数 -->
<input type="hidden" th:value="${informationCodeList.number+1}" id="page">  <!-- 第几页 -->
</div>
<div id="btnBox">
<input type="button" value="New" class="btn-style fl" id="informationCodeAdd">
<input type="button" value="Delete" class="btn-style fl" id="informationCodeDel">
<a class="btn-href" href="/csdb/info/informationCodeDefault.shtml">
<input type="button" value="Default" class="btn-style fl" id="informationCodeDefault"/></a>
<input type="button" value="Save" class="btn-style fl" id="informationCodeSave">
</div>
</div>
</body>
<script th:src="@{/csdb/libs/jquery/jquery-3.2.1.js}" type="text/javascript"></script>
<script th:src="@{/csdb/libs/plugin/layui/layui.js}" type="text/javascript"></script> <script>
<!-- /**
* 分页(layui的版本为1.0.9时使用)
*/
layui.use('laypage', function(){
var laypage = layui.laypage; //执行一个laypage实例
laypage({
cont: 'pages',
pages: $("#pageTotal").val(),
skip: true, //控制分页皮肤
curr:$("#page").val(),
jump:function (obj,first){
if(!first){
window.location.href="/csdb/info/informationCode.shtml?pageNum="+obj.curr
}
}
});
}); --> /**
* 分页(layui的版本为2.x时使用)
*/
layui.use('laypage', function(){
var laypage = layui.laypage; //执行一个laypage实例
laypage({
elem: 'pages', //不同于1.0.9版本
count: $("#pageTotal").val(), //切换分页的回调,当分页被切换时触发,函数返回两个参数:obj(当前分
//页的所有选项值)、first(是否首次,一般用于初始加载的判断)
jump:function (obj,first){
if(!first){
window.location.href="/xxxxxx?pageNum="+obj.curr
}
}
});
}); </script>
</html>

Spring Data JPA + layui的前台分页插件layPage实现页面的分页的更多相关文章

  1. 整合Spring Data JPA与Spring MVC: 分页和排序

    之前我们学习了如何使用Jpa访问关系型数据库.比较完整Spring MVC和JPA教程请见Spring Data JPA实战入门,Spring MVC实战入门. 通过Jpa大大简化了我们对数据库的开发 ...

  2. 整合Spring Data JPA与Spring MVC: 分页和排序pageable

    https://www.tianmaying.com/tutorial/spring-jpa-page-sort Spring Data Jpa对于分页以及排序的查询也有着完美的支持,接下来,我们来学 ...

  3. 快速搭建springmvc+spring data jpa工程

    一.前言 这里简单讲述一下如何快速使用springmvc和spring data jpa搭建后台开发工程,并提供了一个简单的demo作为参考. 二.创建maven工程 http://www.cnblo ...

  4. Spring Data JPA进阶——Specifications和Querydsl

    Spring Data JPA进阶--Specifications和Querydsl 本篇介绍一下spring Data JPA中能为数据访问程序的开发带来更多便利的特性,我们知道,Spring Da ...

  5. 如何在Spring Data JPA中引入Querydsl

    一.环境说明 基础框架采用Spring Boot.Spring Data JPA.Hibernate.在动态查询中,有一种方式是采用Querydsl的方式. 二.具体配置 1.在pom.xml中,引入 ...

  6. Spring Boot 应用系列 1 -- Spring Boot 2 整合Spring Data JPA和Druid,双数据源

    最近Team开始尝试使用Spring Boot + Spring Data JPA作为数据层的解决方案,在网上逛了几圈之后发现大家并不待见JPA,理由是(1)MyBatis简单直观够用,(2)以Hib ...

  7. Hibernate、Mybatis与Spring Data JPA

    从零开始集成Springboot+MyBatis+JPA https://www.jianshu.com/p/e14c4a6f6871 MyBatis 与Hibernate的区别 http://xhr ...

  8. 使用Spring Data JPA进行数据分页与排序

    一.导读 如果一次性加载成千上万的列表数据,在网页上显示将十分的耗时,用户体验不好.所以处理较大数据查询结果展现的时候,分页查询是必不可少的.分页查询必然伴随着一定的排序规则,否则分页数据的状态很难控 ...

  9. javaweb各种框架组合案例(四):maven+spring+springMVC+spring data jpa(hibernate)【失败案例】

    一.失败案例 1. 控制台报错信息 严重: Exception sending context initialized event to listener instance of class org. ...

随机推荐

  1. 【转】理解Linux 配置文件

    原文网址:http://www.mike.org.cn/articles/understanding-linux-configuration-files-linux/ 介绍每个 Linux 程序都是一 ...

  2. 生产环境LNMP (交友)

    一. 下载一键安装包 LNMP   官方地址为:http://lnmp.org/ 原生产环境为 : php5.4.32  mysql 5.5  nginx 1.40   我们用LNMP包安装相应的环境 ...

  3. bzoj4598: [Sdoi2016]模式字符串

    Description 给出n个结点的树结构T,其中每一个结点上有一个字符,这里我们所说的字符只考虑大写字母A到Z,再给出长度为m 的模式串s,其中每一位仍然是A到z的大写字母.Alice希望知道,有 ...

  4. https 请求的端口是443 注意

    注意: 这里录制https的请求 端口号一定是443 才可以抓取到!!!!!! (进坑多次)

  5. HDU-1937题解

    一.题意 一个N*M的矩形,点表示空地,X表示非空地,给你一个数字k,让你在这N*M的区域内找出一个空地数量不小于k且面积最小的矩形.输出矩形的面积. PS:原题的题意是在难懂啊. 二.思路 1.朴素 ...

  6. Tkinter学习

    from tkinter import * window = Tk() # 创建一个窗口 window.mainloop() # 消息循环,显示窗口 window.title("窗口标题&q ...

  7. 【BZOJ】1030: [JSOI2007]文本生成器(AC自动机+dp)

    题目 传送门:QWQ 传送到洛谷QWQ 分析 我一开始也不会做这题的,后来看了很多网上的题解,终于AC了.(我好菜啊) 主要参考:传送门QWQ 直接搞非常麻烦,反正我是不会做.于是考虑求反,即求有多少 ...

  8. Long.parseLong(String s) 其中s必须是数字形式的字符串,才能运用该函数转化为长整型。

    public class ConverTo { public static void main(String [] args) { String numberIn =args[0]; convertN ...

  9. 12_java之构造方法|this|super

    01构造方法引入 * A:构造方法的引入 在开发中经常需要在创建对象的同时明确对象的属性值,比如员工入职公司就要明确他的姓名.年龄等属性信息. 那么,创建对象就要明确属性值,那怎么解决呢?也就是在创建 ...

  10. **解释器全局锁(Global Interpreter Lock)

    解释器全局锁(Global Interpreter Lock),即Python为了保证线程安全而采取的独立线程运行的限制,说白了就是一个核只能在同一时间运行一个线程. [解决办法就是多进程和协程(协程 ...