使用Layui的table实现数据表格与分页功能

使用Layui实现数据表格与分页功能效果如下：table 数据表格文档 - layui.table数据库如下

玖屿

3296人浏览 · 2021-07-17 23:39:50

玖屿 · 2021-07-17 23:39:50 发布

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>