前言

　　以下介绍摘自 layui官网laypage

　　layPage 致力于提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。自 layui 2.0 开始，无论是从核心代码还是API设计，layPage 都完成了一次蜕变。清爽的UI、灵活的排版，极简的调用方式，这一切的优质元素，都将毫无违和感地镶嵌在你的页面之中。laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染，laypage 只负责分页本身的逻辑，具体的数据请求与渲染需要另外去完成。laypage 不仅能应用在一般的异步分页上，还可直接对一段已知数据进行分页展现，更可以取代传统的超链接分页。

效果

代码编写

　　项目背景：springboot + springdata-jpa + thymeleaf + mysql

　　代码贴出来：同样的，大部分逻辑都写在了注释里面

　　maven引包

  1.         <!-- springboot -->
  2.         <dependency>
  3.             <groupId>org.springframework.boot</groupId>
  4.             <artifactId>spring-boot-starter-web</artifactId>
  5.         </dependency>
  6.  
  7.         <dependency>
  8.             <groupId>org.springframework.boot</groupId>
  9.             <artifactId>spring-boot-starter-test</artifactId>
  10.             <scope>test</scope>
  11.         </dependency>
  12.  
  13.         <!--Thymeleaf模板依赖-->
  14.         <dependency>
  15.             <groupId>org.springframework.boot</groupId>
  16.             <artifactId>spring-boot-starter-thymeleaf</artifactId>
  17.         </dependency>
  18.  
  19.         <!--添加springdata-jpa依赖 -->
  20.         <dependency>
  21.             <groupId>org.springframework.boot</groupId>
  22.             <artifactId>spring-boot-starter-data-jpa</artifactId>
  23.         </dependency>
  24.         <!--lombok插件 -->
  25.         <dependency>
  26.             <groupId>org.projectlombok</groupId>
  27.             <artifactId>lombok</artifactId>
  28.         </dependency>
  1. 　　　　<!--添加MySQL驱动依赖 -->
    　　　　<dependency>
    　　　　   <groupId>mysql</groupId>
    　　　　　  <artifactId>mysql-connector-java</artifactId>
    　　　　   <scope>runtime</scope>
    　　　　</dependency>

　　实体类

  1. @Entity
  2. @Table(name = "t_user")
  3. @Data
  4. public class User {
  5.  
  6.     @Id
  7.     @GeneratedValue(strategy= GenerationType.AUTO)
  8.     private Integer id;
  9.  
  10.     private String username;
  11.  
  12.     private String password;
  13.  
  14. }

　　响应头

  1. /**
  2.  * 响应头
  3.  */
  4. @Data
  5. public class Result<T> {
  6.  
  7.     private String message; //通讯消息
  8.  
  9.     private boolean flag; //通讯状态
  10.  
  11.     private T data; //通讯数据
  12.  
  13.     public Result() {
  14.     }
  15.  
  16.     public Result(boolean flag,String message, T data) {
  17.         this.message = message;
  18.         this.flag = flag;
  19.         this.data = data;
  20.     }
  21.  
  22.     public static<T> Result build(boolean flag, String message, T data){
  23.         return new Result(flag,message,data);
  24.     }
  25. }

　　分页头

  1. /**
  2.  * 分页头
  3.  */
  4. @Data
  5. public class PageHeader<T> {
  6.  
  7.     private Integer page;//当前页
  8.  
  9.     private Integer rows;//每页多少条
  10.  
  11.     private Integer count;//总数
  12.  
  13.     private List<T> results;//数据集合
  14.  
  15. }

　　Controller层

  1. @RestController
  2. @RequestMapping("/user")
  3. public class UserController {
  4.  
  5.     @Autowired
  6.     private UserService userService;
  7.  
  8.     /**
  9.      * 跳转index页面
  10.      */
  11.     @GetMapping("/index")
  12.     public ModelAndView index() {
  13.         return new ModelAndView("user_page.html");
  14.     }
  15.  
  16.     /**
  17.      * 分页获取user
  18.      */
  19.     @PostMapping("/page")
  20.     public Result<PageHeader<User>> page(PageHeader<User> pageHeader){
  21.         return userService.getPageUser(pageHeader);
  22.     }
  23.  
  24.     /**
  25.      * 获取所有user
  26.      */
  27.     @PostMapping("/list")
  28.     public Result<User> list(){
  29.         return userService.getAllUser();
  30.     }
  31. }

　　Service层

  1. @Service
  2. public class UserService {
  3.  
  4.     @Autowired
  5.     private UserRepository userRepository;
  6.  
  7. 　　/**
  8.      * 获取所有user
  9.      */
  10.     public Result getAllUser() {
  11.         List<User> userList = userRepository.findAll();
  12.         return Result.build(true,"获取成功！",userList);
  13.     }
  14.  
  15.     /**
  16.      * 分页获取user
  17.      */
  18.     public Result<PageHeader<User>> getPageUser(PageHeader<User> pageHeader) {
  19.         pageHeader.setPage(pageHeader.getPage() - 1);//masql下标从0开始
  20.         Page<User> userPage = userRepository.findAll(new PageRequest(pageHeader.getPage(), pageHeader.getRows()));
  21.         pageHeader.setCount((int) userPage.getTotalElements());//总数
  22.         pageHeader.setResults(userPage.getContent());//数据
  23.         return Result.build(true,"获取成功",pageHeader);
  24.     }
  25. }

　　Repository层

  1. public interface UserRepository extends JpaRepository<User,Integer> , JpaSpecificationExecutor<User> {
  2.  
  3. }

　　user_page.html

  1. <!DOCTYPE html>
  2. <!--解决idea thymeleaf 表达式模板报红波浪线-->
  3. <!--suppress ALL -->
  4. <html xmlns:th="http://www.thymeleaf.org">
  5. <head>
  6.     <meta charset="UTF-8">
  7.     <title>laypage 物理分页与逻辑分页实例</title>
  8.     <link rel="stylesheet" href="http://hanlei.online/Onlineaddress/layui/css/layui.css"/>
  9.     <style>
  10.         body{
  11.             padding: 0px 100px;
  12.         }
  13.         .main {
  14.             margin: auto;
  15.             width: 600px;
  16.             margin-top: 50px;
  17.         }
  18.     </style>
  19. </head>
  20. <body>
  21. <!--逻辑分页-->
  22. <div class="main" style="float: left;">
  23.     <h1>逻辑分页</h1><br/>
  24.     <div id="users_logic"></div>
  25.     <div id="page_logic"></div>
  26. </div>
  27. <!--物理分页-->
  28. <div class="main" style="float: right;">
  29.     <h1>物理分页</h1><br/>
  30.     <div id="users_physics"></div>
  31.     <div id="page_physics"></div>
  32. </div>
  33. </body>
  34. <!-- jquery在线版本 -->
  35. <script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
  36. <script src="http://hanlei.online/Onlineaddress/layui/layui.js"></script>
  37. <script th:inline="javascript">
  38.     var ctx = /*[[@{/}]]*/'';//应用根路径
  39.     var users = {};//所有数据（逻辑分页用到）
  40.     var pages = 0; //总数（逻辑分页用到）
  41.  
  42.     $(function ($) {
  43.         //逻辑分页
  44.         load_page_logic(1,10);
  45.  
  46.         //物理分页
  47.         load_page_physics(1,10);
  48.     });
  49.  
  50.     /**
  51.      * 逻辑分页
  52.      */
  53.     function load_page_logic(curr,limit){
  54.         $.post(ctx+"/user/list",{},function (result) {
  55.             if (result.flag){
  56.                 users = result.data;//所有数据
  57.                 pages = users.length; //总数
  58.                 //获取一个laypage实例
  59.                 layui.use('laypage', function () {
  60.                     var laypage = layui.laypage;
  61.                     //调用laypage 逻辑分页
  62.                     laypage.render({
  63.                         elem: 'page_logic',
  64.                         count: pages,
  65.                         curr:curr,
  66.                         limit:limit,
  67.                         limits: [5,10,15],
  68.                         layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
  69.                         jump: function (obj, first) {
  70.                             //obj包含了当前分页的所有参数，比如：
  71.                             // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
  72.                             // console.log(obj.limit); //得到每页显示的条数
  73.                             document.getElementById('users_logic').innerHTML = thisDate_logic(obj.curr,obj.limit);
  74.                         },
  75.                         prev: '<',
  76.                         next: '>',
  77.                         theme: '#f9c357',
  78.                     })
  79.                 });
  80.             }
  81.         });
  82.     }
  83.  
  84.     /**
  85.      * 传入当前页、每页多少条记录，根据limit去计算，从users集合截取对应数据做展示
  86.      */
  87.     var thisDate_logic = function (curr,limit) {
  88.         var str = "",//当前页需要展示的html
  89.             first = (curr * limit - limit),//展示的第一条数据的下标
  90.             last = curr * limit - 1;//展示的最后一条数据的下标
  91.         last = last >= pages ? (pages - 1) : last;
  92.         for (var i = first; i <= last; i++) {
  93.             var user = users[i];
  94.             str += "<div class='user'>" +
  95.                 "<p>用户名：" + user.username + "    密码：" + user.password + "</p>" +
  96.                 "</div><br/>";
  97.         }
  98.         return str;
  99.     };
  100.  
  101.     /*************************华丽的分割线****************************/
  102.  
  103.     /**
  104.      * 物理分页（每次都重新生成laypage分页栏，技巧来自layui社区：https://fly.layui.com/jie/8471/）
  105.      */
  106.     function load_page_physics(curr,limit){
  107.         $.post(ctx+"/user/page",{page:curr,rows:limit},function (result) {
  108.             if (result.flag){
  109.                 var usersPage = result.data;
  110.                 //展示数据
  111.                 document.getElementById('users_physics').innerHTML = thisDate_physics(usersPage.results);
  112.                 //获取一个laypage实例
  113.                 layui.use('laypage', function () {
  114.                     var laypage = layui.laypage;
  115.                     //调用laypage 逻辑分页
  116.                     laypage.render({
  117.                         elem: 'page_physics',
  118.                         count: usersPage.count,
  119.                         curr: curr,
  120.                         limit:limit,
  121.                         limits: [5,10,15],
  122.                         layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
  123.                         jump: function (obj, first) {
  124.                             //obj包含了当前分页的所有参数，比如：
  125.                             // console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
  126.                             // console.log(obj.limit); //得到每页显示的条数
  127.                             if(!first) {
  128.                                 load_page_physics(obj.curr,obj.limit);
  129.                             }
  130.                         },
  131.                         prev: '<',
  132.                         next: '>',
  133.                         theme: '#f9c357',
  134.                     })
  135.                 });
  136.             }
  137.         });
  138.     }
  139.  
  140.     /**
  141.      * 传入users做数据做展示
  142.      */
  143.     var thisDate_physics = function (users) {
  144.         var str = "";
  145.         for (var i = 0; i < users.length; i++) {
  146.             var user = users[i];
  147.             str += "<div class='user'>" +
  148.                 "<p>用户名：" + user.username + "    密码：" + user.password + "</p>" +
  149.                 "</div><br/>";
  150.         }
  151.         return str;
  152.     };
  153. </script>
  154. </html>

后记

　　laypage.render(options)更多参数查看layui官方文档，这个例子只有分页功能，搜索、排序自行扩展一下就可以了。

laypage 物理分页与逻辑分页实例的更多相关文章

  1. java 物理分页和逻辑分页

    A.逻辑分页利用游标分页,好处是所有数据库都统一,坏处就是效率低.1.逻辑分页的第一种方式,利用ResultSet的滚动分页.这种分页方式依靠的是对结果集的算法来分页,因此通常被称为“逻辑分页”.步骤 ...

  2. 2017.12.14 Mybatis物理分页插件PageHelper的使用（一）

    参考来自: http://www.360doc.com/content/15/0728/15/12642656_487954693.shtml https://www.cnblogs.com/digd ...

  3. 208道面试题(JVM部分暂无答案)

    这是从网上看到的一套java面试题, 答案只是一个大概, 另外题目质量参差不齐, 斟酌参考(JVM的部分暂时没有答案) 一.Java 基础 JDK 和 JRE 有什么区别? 答: JDK(Java D ...

  4. MyBatis分页

    搞清楚什么是分页(pagination) 例如,在数据库的某个表里有1000条数据,我们每次只显示100条数据,在第1页显示第0到第99条,在第2页显示第100到199条,依次类推,这就是分页. 分页 ...

  5. Vue2.0+ElementUI+PageHelper实现的表格分页

    Vue2.0+ElementUI+PageHelper实现的表格分页 前言 最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即 ...

  6. Java 最常见 200+ 面试题答案全解析-面试必备

    本文分为十九个模块,分别是: Java 基础.容器.多线程.反射.对象拷贝.Java Web .异常.网络.设计模式.Spring/Spring MVC.Spring Boot/Spring Clou ...

  7. Java 最常见 200+ 面试题全解析：面试必备

    本文分为十九个模块,分别是: Java 基础.容器.多线程.反射.对象拷贝.Java Web .异常.网络.设计模式.Spring/Spring MVC.Spring Boot/Spring Clou ...

  8. 208道Java常见的面试题

    一.Java 基础 1.JDK 和 JRE 有什么区别? JRE=JVM+各种基础类库+java类库(String\System) JDK>JRE>JVM JRE:是java运行时环境  ...

  9. Java 最常见 200+ 面试题 + 全解析

    本文分为十九个模块,分别是: Java 基础.容器.多线程.反射.对象拷贝.Java Web .异常.网络.设计模式.Spring/Spring MVC.Spring Boot/Spring Clou ...

随机推荐

  1. Maven搭建SSH框架

    工具:Eclipse(Maven管理工具)+Tomcat+Mysql. 1.新建一个Maven工程(maven-archetype-webapp). 打开File ——>new——>Mav ...

  2. Android Studio 3.1.2 修改字体(font)大小(size) 及老版本修改主题、字体、颜色 参照地址

    Android Studio 3.1.2  修改字体(font)大小(size) 步骤:File-Settings-Editor-Color Scheme-Color Scheme Font-Size ...

  3. 初识Java Servlet

    Java Servlet是什么? Servlet的本质就是一个Java接口,之所以能生成动态的Web内容,是因为对客户的一个HTTP请求,Servlet通过接口这个规范重写了其中的方法,然后Web服务 ...

  4. 【repost】js window对象属性和方法相关资料整理

    window对象有以下方法: open close alert confirm prompt setTimeout clearTimeout setInterval clearInterval mov ...

  5. 如果解决小程序1024kb渲染之坑

    问题: 在小程序开发中如果有那么个场景和操作步骤,获取商品下拉列表商品列表data为goodsList 当从后台获取数据response.data.list,通常我们会setData({goodsLi ...

  6. java（二）Web部分

    2.1.1讲一下http get和post请求的区别? GET和POST请求都是http的请求方式,用户通过不同的http的请求方式完成对资源(url)的不同操作.GET,POST,PUT,DELET ...

  7. 熟悉常用的Linux操作

    请按要求上机实践如下linux基本命令. cd命令:切换目录 (1)切换到目录 /usr/local  cd /usr/local (2)去到目前的上层目录    cd .. (3)回到自己的主文件夹 ...

  8. some knowledge of language

    1:编译型语言2:解释型语言编译型:编译形成结果,再整体运行解释型:运行产生结果,边解释运行java 特殊(.class)再解释3:脚本语言是解释语言它的优点是方便阅读,不需要写非常多的类型相关的代码 ...

  9. IntelliJ IDEA小问题通过操作软件解决

    Diamond types are not supported at this language level http://blog.csdn.net/qq_34884729/article/deta ...

  10. 《JavaScript 高级程序设计》读书笔记一 简介

    一   历史 二   实现 a. javascript三个部分: ECMAScript:由ECMA-262定义,提供核心语言功能: DOM:提供HTML的应用程序编程接口/提供访问和操作网页内容的方法 ...