Spring Boot+layui构建简单的项目-table表格自动分页

最新推荐文章于 2024-08-16 07:50:40 发布

中庭地白树栖鸦

最新推荐文章于 2024-08-16 07:50:40 发布

阅读量6.1k

点赞数 1

分类专栏：工作代码库 Spring Boot Spring Boot学习系列文章标签： Spring Boot layui

本文链接：https://blog.csdn.net/dongzhongyan/article/details/88681685

版权

工作代码库同时被 3 个专栏收录

8 篇文章 0 订阅

订阅专栏

Spring Boot

4 篇文章 0 订阅

订阅专栏

Spring Boot学习系列

4 篇文章 0 订阅

订阅专栏

创建项目属于简单的入门，这里不再多余的介绍，把项目结构的pom文件粘出：
项目结构
在这里插入图片描述
pom.xml

<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 http://maven.apache.org/xsd/maven-4.0.0.xsd">
	<modelVersion>4.0.0</modelVersion>
	<parent>
		<groupId>org.springframework.boot</groupId>
		<artifactId>spring-boot-starter-parent</artifactId>
		<version>2.1.3.RELEASE</version>
		<relativePath/> <!-- lookup parent from repository -->
	</parent>
	<groupId>com.study</groupId>
	<artifactId>dongzy-demo</artifactId>
	<version>1.1-SNAPSHOT</version>
	<name>dongzy-demo</name>

	<properties>
		<java.version>1.8</java.version>
	</properties>
	<dependencies>
		<!--springBoot核心组件-->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-jdbc</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-thymeleaf</artifactId>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-web</artifactId>
		</dependency>
		<!--热部署-->
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-devtools</artifactId>
			<scope>runtime</scope>
		</dependency>
		<!--数据库驱动-->
		<dependency>
			<groupId>com.microsoft.sqlserver</groupId>
			<artifactId>mssql-jdbc</artifactId>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>mysql</groupId>
			<artifactId>mysql-connector-java</artifactId>
			<scope>runtime</scope>
		</dependency>
		<dependency>
			<groupId>org.springframework.boot</groupId>
			<artifactId>spring-boot-starter-test</artifactId>
			<scope>test</scope>
		</dependency>
        <!--json包-->
		<dependency>
			<groupId>com.alibaba</groupId>
			<artifactId>fastjson</artifactId>
			<version>1.2.53</version>
		</dependency>
	</dependencies>

	<build>
		<plugins>
			<plugin>
				<groupId>org.springframework.boot</groupId>
				<artifactId>spring-boot-maven-plugin</artifactId>
			</plugin>
		</plugins>
	</build>
</project>

index.html使用thymeleaf静态模板

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>layout 后台大布局 - Layui</title>
    <link rel="stylesheet" th:href="@{/static/layui/css/layui.css}">
</head>
<body class="layui-layout-body">
<table class="layui-hide" id="demo" lay-filter="demo"></table>
<script th:src="@{/static/layui/layui.js}"></script>
<script>
    //JavaScript代码区域
    layui.use('element', function(){
        var element = layui.element;

    });
</script>

<!--分页的前台核心代码-->
<script>
    layui.use(['table', 'form'], function () {
        var table = layui.table;
        var form = layui.form;
        var $ = layui.$;

        form.render('select');
        table.render({
            elem: '#demo'  //绑定table id
            , url: 'getAllSchedule'  //数据请求路径，
            , cellMinWidth: 80
            , cols: [
                [
                    {field: 'etlJobInfoID', title: '调度任务唯一ID'}
                    , {field: 'jobName', title: '任务名称'}
                    , {field: 'msg', title: '任务执行信息', width: 150}
                    , {field: 'status', title: '任务状态'}
                    , {field: 'dataSourceInfo', title: '数据源'}
                    , {field: 'targetSourceInfo', title: '目标源'}
                    , {field: 'userName', title: '调用者'}
                    , {field: 'createTime', title: '任务添加时间', templet: '#createTime'}
                    , {field: 'startTime', title: '开始时间', templet: '#startTime'}
                    , {field: 'endTime', title: '结束时间', templet: '#endTime'}
                    , {field: 'logText', title: '抽取日志'}//一个工具栏  具体请查看layui官网
                ]
            ]
            , id: 'testReload'
            , page: true
            , limit: 10   //默认十条数据一页
            , limits: [10, 20, 30, 50]  //数据分页条
            , done: function (res, curr, count) {
                layer.msg(res.msg)
            }

        });

        form.on('select(search_type)', function (data) {
            if ($("#search_type")[0].value == '') {
                layer.msg('请选择数据源类型')
                return;
            }
            //执行重载
            table.reload('testReload', {
                page: {
                    curr: 1 //重新从第 1 页开始
                }
                , where: {
                    driverType: data.value //查询条件
                }
            });
        });
    });
</script>

<!--日期格式化js-->
<script th:src="@{/static/js/date-format.js}" type="text/javascript" charset="utf-8"></script>
<script id="createTime" type="text/html">
    {{#
    var date = new Date();
    date.setTime(d.createTime);
    return date.Format("yyyy-MM-dd hh:mm:ss");
    }}
</script>
<script id="startTime" type="text/html">
    {{#
    var date = new Date();
    if(d.endTime != null){
    date.setTime(d.startTime);
    return date.Format("yyyy-MM-dd hh:mm:ss");
    }
    }}
</script>
<script id="endTime" type="text/html">
    {{#
    var date = new Date();
    if(d.endTime != null){
    date.setTime(d.endTime);
    return date.Format("yyyy-MM-dd hh:mm:ss");
    }
    }}
</script>
</body>
</html>

getAllSchedulea方法所在的controller

@ResponseBody
    @RequestMapping(value = "getAllSchedule", produces = {"application/text;charset=UTF-8"})
    public String jobScheduleAll(Map<String, Object> model, int page, int limit, String driverType) {
        ResultModel resultModel = scheduleService.getAllSchedule();
        List<EtlJobInfoEntity> jobInfoEntities = (List<EtlJobInfoEntity>) resultModel.getData();
        ResultModel resultModel2 = null;
        if (driverType == null || "".equals(driverType)) {
            model.put("code", 0);
            model.put("msg", "数据源驱动不正确");
            model.put("count", 0);
            model.put("data", new ArrayList<>());
            return JSON.toJSONString(model);
        }
     }

service就是简单的分页查询，省略。
效果图
在这里插入图片描述