一、后台代码：

　　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的mysql

    mysql https://www.cnblogs.com/cnblogsfans/archive/2009/09/21/1570942.html https://blog.csdn.net/Smal ...

  2. luvcview,使用mplayer查看摄像头和luvcview保存YUV图像视频的播放（转）

    luvcview,使用mplayer查看摄像头和luvcview保存YUV图像视频的播放 在mplayer中查看摄像头,可使用如下命令:mplayer tv:// -tv driver=v4l2:in ...

  3. 自定义DelegatingHandler为ASP.NET Web Api添加压缩与解压的功能

    HTTP协议中的压缩 Http协议中使用Accept-Encoding和Content-Encoding头来表示期望Response内容的编码和当前Request的内容编码.而Http内容的压缩其实是 ...

  4. Java语言与C语言混合编程(2)--在Java中调用C语言本地库

    在上一篇文章中介绍了Java语言中的native关键字,以及Java语言调用C语言的编译生成本地动态链接库(DLL)实现加法运算的小例子,本文通过一个更加详细的例子,深入讲解Java语言调用C语言的函 ...

  5. UML系列图--用例图(转)

    UML-Unified Model Language 统一建模语言,又称标准建模语言.是用来对软件密集系统进行可视化建模的一种语言. 在UML系统开发中有三个主要的模型:  功能模型: 从用户的角度展 ...

  6. 使用FileZilla连接Linux

      FileZilla是一个免费开源的FTP软件,分为客户端版本和服务器版本,具备所有的FTP软件功能.可控性.有条理的界面和管理多站点的简化方式使得Filezilla客户端版成为一个方便高效的FTP ...

  7. A Complete Web Video Solution

    A Complete Web Video Solution FLASH . HTML5 . JAVASCRIPT API Support Embed videos from youtube, Vime ...

  8. ROS的ovpn设置

    转摘至www.80uncle.com 先下载Win下的openvpn客户端http://openvpn.se/download.html 我的证书是用这个客户端做的openvpn-2.0.9-gui- ...

  9. 007：MySQL SSL

    一. SSL安装 SSL(Secure Socket Layer)是维护Client - Server之间加密通讯的一套安全协议: --默认ssl未开启 mysql> show variable ...

  10. 文档主题生成模型（LDA）

    一．问题描述 1.1文本建模相关 统计文本建模的目的其实很简单:就是估算一组参数,这组参数使得整个语料库出现的概率最大.这是很简单的极大似然的思想了,就是认为观测到的样本的概率是最大的.建模的目标也是 ...