laypage 物理分页与逻辑分页实例
前言
以下介绍摘自 layui官网laypage
layPage 致力于提供极致的分页逻辑，既可轻松胜任异步分页，也可作为页面刷新式分页。自 layui 2.0 开始，无论是从核心代码还是API设计，layPage 都完成了一次蜕变。清爽的UI、灵活的排版，极简的调用方式，这一切的优质元素，都将毫无违和感地镶嵌在你的页面之中。laypage 的使用非常简单，指向一个用于存放分页的容器，通过服务端得到一些初始值，即可完成分页渲染，laypage 只负责分页本身的逻辑，具体的数据请求与渲染需要另外去完成。laypage 不仅能应用在一般的异步分页上，还可直接对一段已知数据进行分页展现，更可以取代传统的超链接分页。
效果
代码编写
项目背景：springboot + springdata-jpa + thymeleaf + mysql
代码贴出来：同样的，大部分逻辑都写在了注释里面
maven引包
<!-- springboot -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency> <dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency> <!--Thymeleaf模板依赖-->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency> <!--添加springdata-jpa依赖 -->
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<!--lombok插件 -->
<dependency>
<groupId>org.projectlombok</groupId>
<artifactId>lombok</artifactId>
</dependency>
<!--添加MySQL驱动依赖 -->
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
<scope>runtime</scope>
</dependency>
实体类
@Entity
@Table(name = "t_user")
@Data
public class User { @Id
@GeneratedValue(strategy= GenerationType.AUTO)
private Integer id; private String username; private String password; }
响应头
/**
* 响应头
*/
@Data
public class Result<T> { private String message; //通讯消息 private boolean flag; //通讯状态 private T data; //通讯数据 public Result() {
} public Result(boolean flag,String message, T data) {
this.message = message;
this.flag = flag;
this.data = data;
} public static<T> Result build(boolean flag, String message, T data){
return new Result(flag,message,data);
}
}
分页头
/**
* 分页头
*/
@Data
public class PageHeader<T> { private Integer page;//当前页 private Integer rows;//每页多少条 private Integer count;//总数 private List<T> results;//数据集合 }
Controller层
@RestController
@RequestMapping("/user")
public class UserController { @Autowired
private UserService userService; /**
* 跳转index页面
*/
@GetMapping("/index")
public ModelAndView index() {
return new ModelAndView("user_page.html");
} /**
* 分页获取user
*/
@PostMapping("/page")
public Result<PageHeader<User>> page(PageHeader<User> pageHeader){
return userService.getPageUser(pageHeader);
} /**
* 获取所有user
*/
@PostMapping("/list")
public Result<User> list(){
return userService.getAllUser();
}
}
Service层
@Service
public class UserService { @Autowired
private UserRepository userRepository; /**
* 获取所有user
*/
public Result getAllUser() {
List<User> userList = userRepository.findAll();
return Result.build(true,"获取成功！",userList);
} /**
* 分页获取user
*/
public Result<PageHeader<User>> getPageUser(PageHeader<User> pageHeader) {
pageHeader.setPage(pageHeader.getPage() - 1);//masql下标从0开始
Page<User> userPage = userRepository.findAll(new PageRequest(pageHeader.getPage(), pageHeader.getRows()));
pageHeader.setCount((int) userPage.getTotalElements());//总数
pageHeader.setResults(userPage.getContent());//数据
return Result.build(true,"获取成功",pageHeader);
}
}
Repository层
public interface UserRepository extends JpaRepository<User,Integer> , JpaSpecificationExecutor<User> {
}
user_page.html
<!DOCTYPE html>
<!--解决idea thymeleaf 表达式模板报红波浪线-->
<!--suppress ALL -->
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>laypage 物理分页与逻辑分页实例</title>
<link rel="stylesheet" href="http://hanlei.online/Onlineaddress/layui/css/layui.css"/>
<style>
body{
padding: 0px 100px;
}
.main {
margin: auto;
width: 600px;
margin-top: 50px;
}
</style>
</head>
<body>
<!--逻辑分页-->
<div class="main" style="float: left;">
<h1>逻辑分页</h1><br/>
<div id="users_logic"></div>
<div id="page_logic"></div>
</div>
<!--物理分页-->
<div class="main" style="float: right;">
<h1>物理分页</h1><br/>
<div id="users_physics"></div>
<div id="page_physics"></div>
</div>
</body>
<!-- jquery在线版本 -->
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script src="http://hanlei.online/Onlineaddress/layui/layui.js"></script>
<script th:inline="javascript">
var ctx = /*[[@{/}]]*/'';//应用根路径
var users = {};//所有数据（逻辑分页用到）
var pages = 0; //总数（逻辑分页用到） $(function ($) {
//逻辑分页
load_page_logic(1,10); //物理分页
load_page_physics(1,10);
}); /**
* 逻辑分页
*/
function load_page_logic(curr,limit){
$.post(ctx+"/user/list",{},function (result) {
if (result.flag){
users = result.data;//所有数据
pages = users.length; //总数
//获取一个laypage实例
layui.use('laypage', function () {
var laypage = layui.laypage;
//调用laypage 逻辑分页
laypage.render({
elem: 'page_logic',
count: pages,
curr:curr,
limit:limit,
limits: [5,10,15],
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
jump: function (obj, first) {
//obj包含了当前分页的所有参数，比如：
// console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
// console.log(obj.limit); //得到每页显示的条数
document.getElementById('users_logic').innerHTML = thisDate_logic(obj.curr,obj.limit);
},
prev: '<',
next: '>',
theme: '#f9c357',
})
});
}
});
} /**
* 传入当前页、每页多少条记录，根据limit去计算，从users集合截取对应数据做展示
*/
var thisDate_logic = function (curr,limit) {
var str = "",//当前页需要展示的html
first = (curr * limit - limit),//展示的第一条数据的下标
last = curr * limit - 1;//展示的最后一条数据的下标
last = last >= pages ? (pages - 1) : last;
for (var i = first; i <= last; i++) {
var user = users[i];
str += "<div class='user'>" +
"<p>用户名：" + user.username + " 密码：" + user.password + "</p>" +
"</div><br/>";
}
return str;
}; /*************************华丽的分割线****************************/ /**
* 物理分页（每次都重新生成laypage分页栏，技巧来自layui社区：https://fly.layui.com/jie/8471/）
*/
function load_page_physics(curr,limit){
$.post(ctx+"/user/page",{page:curr,rows:limit},function (result) {
if (result.flag){
var usersPage = result.data;
//展示数据
document.getElementById('users_physics').innerHTML = thisDate_physics(usersPage.results);
//获取一个laypage实例
layui.use('laypage', function () {
var laypage = layui.laypage;
//调用laypage 逻辑分页
laypage.render({
elem: 'page_physics',
count: usersPage.count,
curr: curr,
limit:limit,
limits: [5,10,15],
layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
jump: function (obj, first) {
//obj包含了当前分页的所有参数，比如：
// console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
// console.log(obj.limit); //得到每页显示的条数
if(!first) {
load_page_physics(obj.curr,obj.limit);
}
},
prev: '<',
next: '>',
theme: '#f9c357',
})
});
}
});
} /**
* 传入users做数据做展示
*/
var thisDate_physics = function (users) {
var str = "";
for (var i = 0; i < users.length; i++) {
var user = users[i];
str += "<div class='user'>" +
"<p>用户名：" + user.username + " 密码：" + user.password + "</p>" +
"</div><br/>";
}
return str;
};
</script>
</html>
后记
laypage.render(options)更多参数查看layui官方文档，这个例子只有分页功能，搜索、排序自行扩展一下就可以了。
laypage 物理分页与逻辑分页实例的更多相关文章
- java 物理分页和逻辑分页
A.逻辑分页利用游标分页,好处是所有数据库都统一,坏处就是效率低.1.逻辑分页的第一种方式,利用ResultSet的滚动分页.这种分页方式依靠的是对结果集的算法来分页,因此通常被称为“逻辑分页”.步骤 ...
- 2017.12.14 Mybatis物理分页插件PageHelper的使用（一）
参考来自: http://www.360doc.com/content/15/0728/15/12642656_487954693.shtml https://www.cnblogs.com/digd ...
- 208道面试题(JVM部分暂无答案)
这是从网上看到的一套java面试题, 答案只是一个大概, 另外题目质量参差不齐, 斟酌参考(JVM的部分暂时没有答案) 一.Java 基础 JDK 和 JRE 有什么区别? 答: JDK(Java D ...
- MyBatis分页
搞清楚什么是分页(pagination) 例如,在数据库的某个表里有1000条数据,我们每次只显示100条数据,在第1页显示第0到第99条,在第2页显示第100到199条,依次类推,这就是分页. 分页 ...
- Vue2.0+ElementUI+PageHelper实现的表格分页
Vue2.0+ElementUI+PageHelper实现的表格分页 前言 最近做了一些前端的项目,要对表格进行一些分页显示.表格分页的方法有很多,从宏观上来说分为物理分页和逻辑分页,由于逻辑分页(即 ...
- Java 最常见 200+ 面试题答案全解析-面试必备
本文分为十九个模块,分别是: Java 基础.容器.多线程.反射.对象拷贝.Java Web .异常.网络.设计模式.Spring/Spring MVC.Spring Boot/Spring Clou ...
- Java 最常见 200+ 面试题全解析：面试必备
本文分为十九个模块,分别是: Java 基础.容器.多线程.反射.对象拷贝.Java Web .异常.网络.设计模式.Spring/Spring MVC.Spring Boot/Spring Clou ...
- 208道Java常见的面试题
一.Java 基础 1.JDK 和 JRE 有什么区别? JRE=JVM+各种基础类库+java类库(String\System) JDK>JRE>JVM JRE:是java运行时环境 ...
- Java 最常见 200+ 面试题 + 全解析
本文分为十九个模块,分别是: Java 基础.容器.多线程.反射.对象拷贝.Java Web .异常.网络.设计模式.Spring/Spring MVC.Spring Boot/Spring Clou ...
随机推荐
- Lucene用法示例
整理一下 ELK 和 Grafana 中会用到的 Lucene 用法: 通配符 示例1:过滤出 url 中包含 .pw/ 的 网址 url.keyword:*.pw\/* 正则表达式 示例1:过滤出 ...
- 简析 __init__、__new__、__call__ 方法
简析 __init__.__new__.__call__ 方法 任何事物都有一个从创建,被使用,再到消亡的过程,在程序语言面向对象编程模型中,对象也有相似的命运:创建.初始化.使 用.垃圾回收,不同的 ...
- 《JavaScript 高级程序设计》读书笔记二 使用JavaScript
一 <script>元素 a.四个属性: async:立即异步加载外部脚本: defer:延迟到文档完全被解析再加载外部脚本: src:外部脚本路径: type:脚本语言的内容类型: ...
- QEMU KVM libvirt手册(4) – images
RAW raw是默认的格式,格式简单,容易转换为其他的格式.需要文件系统的支持才能支持sparse file 创建image # qemu-img create -f raw flat.img 10G ...
- 吴恩达机器学习笔记48-降维目标：数据压缩与可视化（Motivation of Dimensionality Reduction : Data Compression & Visualization）
目标一:数据压缩 除了聚类,还有第二种类型的无监督学习问题称为降维.有几个不同的的原因使你可能想要做降维.一是数据压缩,数据压缩不仅允许我们压缩数据,因而使用较少的计算机内存或磁盘空间,而且它也让我们 ...
- Java Web 开发中的中文乱码与解决方式
乱码产生的原因 不管是request乱码还是response乱码,其实都是由于客户端(浏览器)跟服务器端采用的编码格式不一致造成的.以request乱码为例:浏览器向服务器发送请求,因为浏览器与服务器 ...
- JDK设计模式之——责任链(Filter)
责任链的设计模式可以参考Servlet的FilterChain.FilterChain中的每个Filter(过滤器)就像一个个的链条 web开发中 有时候需要对接口request和response进行 ...
- [转载]PHP中PSR-[0-4]规范
PHP是世界上最伟大的语言,这一点是毋庸置疑的吧.哈哈哈哈哈哈 .这个霸气的开头不错!(^__^) 但是正是因为伟大,所以用的人也就多了,人一多,再牛逼再伟大的东西,都会产生问题,逐渐就造成了很多 ...
- 使用ajax的post方式下载excel
项目需求,前端发起ajax请求,后端生成excel并下载,同时需要在header头中,带上token验证信息,参考了很多文章,最终实现如下: PHP后端使用base64: $filename = 'd ...
- Linux 系统下实践 VLAN
本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 01 准备环境 ...