table 数据表格文档 - layui.table
思想:使用sql的limit来进行分页,前端使用layui框架
语法:select * from 表名 limit 起始值,条数
效果如下:
准备工作
创建springboot项目
application.yml
server:
port: 8081
spring:
datasource:
driver-class-name: com.mysql.cj.jdbc.Driver
url: jdbc:mysql://localhost:3306/springboot?useUnicode=true & characterEncoding=utf-8 &
useSSL=true & serverTimezone=Asia/Shanghai
username: root
password: 123456
mybatis:
mapper-locations: classpath:/mapper/*.xml
type-aliases-package: upload_image2.demo.entity
pom.xml
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-jdbc</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.mybatis.spring.boot</groupId>
<artifactId>mybatis-spring-boot-starter</artifactId>
<version>2.1.2</version>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
</dependency>
<dependency>
<groupId>org.webjars</groupId>
<artifactId>layui</artifactId>
<version>2.5.7</version>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
DemoApplication.java
@SpringBootApplication
@MapperScan("upload_image2.demo.mapper")
public class DemoApplication{
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
}
}
数据库如下
后端代码
两个实体分别是Image和ImageJson,前者用来对应数据库,后者用来存储分页效果截取的信息。
public class Image {
private Integer id;
private String imageDescribe;
private String imageAddress;
//getter和setter代码自行添加或者使用@Data
}
public class ImageJson {
private Integer acount;
private List<Image> image;
//getter和setter,toString自行添加
}
Repository
@Mapper
@Repository
public interface ImageMapper {
public int acountAll();
//@Param这里很重要,我使用的是mybatis,传到后面两个参数,如果这里不指定名字,后面就不知道哪个是哪个
public List<Image>findAllByLimit(@Param("pageindex") int pageindex, @Param("pagesize") int pagesize);
}
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd" >
<mapper namespace="upload_image2.demo.mapper.ImageMapper">
<!--用来查询数据总数的-->
<select id="acountAll" resultType="Integer">
SELECT count(id) from springboot.images
</select>
<!--用来查询当前页的数据-->
<select id="findAllByLimit" resultType="upload_image2.demo.entity.Image">
SELECT * from springboot.images limit #{pageindex},#{pagesize}
</select>
</mapper>
Service
public interface ImageService {
public ImageJson findAllByLimit(int pageindex, int pagesize);
}
@Service
public class ImageServiceImpl implements ImageService {
@Autowired
private ImageMapper imageMapper;
//分页操作
public ImageJson findAllByLimit(int pageindex, int pagesize){
ImageJson imageJson=new ImageJson();
imageJson.setAcount(imageMapper.acountAll());
imageJson.setImage(imageMapper.findAllByLimit(pageindex,pagesize));
return imageJson;
}
}
Controller
@Controller
public class PageController {
@Autowired
private ImageService imageService;
@RequestMapping("/page")
public String page(){
return "page";
}
@GetMapping("/paging")
@ResponseBody
//由于前端使用layui的table,默认传过来的是page和limit,所以这里的名字也是用的这个
public ImageJson paging(int page,int limit){
//这里之前所是(page-1)*limit是因为sql语句是起始数据,条数。前端传来的是页码,条数
return imageService.findAllByLimit((page-1)*limit,limit);
}
}
前端代码
page.html
导入layui.css和layui.js
这里使用的是maven导入的,当然也可以下载复制到项目里再引入
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<title>Layui</title>
<link rel="stylesheet" th:href="@{/webjars/layui/2.5.7/css/layui.css}">
</head>
<body>
<table class="layui-hide" id="test"></table>
<script th:src="@{/webjars/layui/2.5.7/layui.js}"></script>
<script>
//加载
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#test'
,url: "/paging"
,width:800
,height:278
//有个request可以自定义传到后端的页码和大小的名字
//cols:表格创建,id,imageDescribe,imageAddress都是对应实体类Image的
//title是显示在页面上的列名,sort是加上排序功能,还有许多功能可以在官方文档中查看
,cols: [
[
{field:'id', title: 'ID',width:80, sort: true}
,{field:'imageDescribe', title: '图片描述'}
,{field:'imageAddress',title: '图片地址'}
]
]
// parseData 回调函数将其解析成 table 组件所规定的数据格式
//res我们后端返回的是ImageJson这个对象,所以这里面有acount变量和List<Image>对象集合
,parseData:function (res) {
return {
//code:解析接口状态,0即正常
"code":0,
//count:数据总数,很多人直接这里res.length。也就是拿返回数据的长度来作为长度
//那这样你原本的数据库可能有100条信息,但是你截取每页10个数据,你这里也就只有10了
//这样子你不能翻页,只能在第一页
"count":res.acount,
//data:这里是我们返回的对象集合,也就是我们的数据
"data":res.image
};
}
,page:true //page默认为false,true表示启动分页效果
,limit:5 //初始化每页5条数据
,limits:[5,10] //选择分页限制条数,这里可以自定义
});
});
</script>
</body>
</html>
相关的table有很多其他参数可以更改不少东西,详细见 table 数据表格官方文档 - layui.table
第一次写博客,可能写的不太好,见谅