Thymeleaf + Layui+快速分页模板(含前后端代码)

发现很多模块写法逻辑太多重复的，因此把分页方法抽取出来记录以下，以后想写分页直接拿来用即可：

1. 首先是queryQrEx.html：

<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="/layui/css/layui.css">
    <title>数据查询</title>
</head>
<body>
<h1 style="text-align: center;">数据查询</h1>
<div class="layui-form layui-form-pane" style="margin:0" lay-filter="qrFormFilter"> <!--必须在表单中添加layui-form，否则提交的时候无法获取到任何值-->
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label" style="width:200px">Tray No \ Box No \ 卡板No</label>
            <div class="layui-input-block" style="margin-left: 200px;">
                <input name="trayNo"  class="layui-input" th:value="${trayNo}">
            </div>
        </div>
        <div class="layui-inline">
            <label class="layui-form-label">Tray日期</label>
            <div class="layui-input-inline"  style="width: 180px;">
                <input id="createTime" name="createTime" class="layui-input" />
            </div>
        </div>
        <div class="layui-inline">
            <button class="layui-btn" id="searchBtn" lay-submit lay-filter="data-search-btn"><i class="layui-icon layui-icon-search">查询</i></button>
        </div>
    </div>
</div>
<script type="text/html" id="toolbarDemo"></script>
<table id="qrexTable"></table>
<script type="text/html" id="page-pagebar"><!--分页插件 + 导出全部-->
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-hei layui-btn-sm " lay-event="export" ><i class="layui-icon layui-icon-export">导出全部</i></button>
    </div>
</script>

<script src="/layui/layui.js"></script>
<script th:inline="javascript">
    layui.use(['layer', 'form','table'], function() {
        var $ = layui.jquery,
        form = layui.form,
        table = layui.table,
        layer = layui.layer,
        laydate = layui.laydate;

        laydate.render({
            elem: '#createTime'
            ,range: '~'
            ,value: [[${createTime}]] //初始化日期
            ,max:0 //最大日期只能选择当天
            ,rangeLinked: true // 开启日期范围选择时的区间联动标注模式 ---  layui2.8+ 新增
        });

      table.render({
            elem: '#qrexTable',
            url: '/getQrExcList',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print'],
            where: {createTime: [[${createTime}]] },
            pagebar: '#page-pagebar', // 表格中需要指定分页栏，否则会自动使用默认的分页模块
            cols: [
                [
                    {type:'numbers', title: '序号', width: 60, fixed:'left'},
			        { field: 'trayNo', width: 210, title: 'trayNo'},
			        { field: 'leadid', width:130, title: '用户' , sort: true},
			        { field: 'createTime', width:155, sort: true, title: '创建时间' , templet:function(d){return layui.util.toDateString(d.createTime, 'yyyy-MM-dd HH:mm')}}
                ]
            ],
                page: true,
                limit: 20,
                limits: [20, 50, 100],
        });

         //搜索
	    form.on('submit(data-search-btn)', function (data) {
             table.reload('qrexTable',{
                where: data.field
                , page: {
                    curr: 1 //重新从第 1 页开始,如果当前是第10页，再次根据其他条件查询可能无法查询到第10页的数据,翻页时并不会触发跳到第1页
                }
            });
        });

         // 底部分页栏事件
       table.on('pagebar(qrexTable)', function(obj){
          var eventValue = obj.event; // 获得按钮 lay-event 值
          if(eventValue == 'export'){
                 $.get('/getQrExcList', form.val('qrFormFilter'), function(res) {
                    if(res.code==0){
                        table.exportFile('qrexTable', res.data, 'xls'); //表名 数据  格式
                    }else{
                        layer.msg(res.msg, {icon: 5});
                    }
                })
          }
        });


    });
</script>
</body>
</html>

2. 1 分页类：

//首先写个分页参数类
public class Page {   //所有类可以继承整个类

    @TableField(exist=false)
    private int page=1;  //第几页,默认第一页，否则如果没传值默认会变成0 ，（0-1）*20会变成-20导致查询报错
    @TableField(exist=false)
    private Integer limit;//每页多少条
}

2.2 统一返回值类（统一返回值有助于编写操作日志时返回接口的返回值，且layui表格的返回值也是这个类的格式）

package com.epson.entity;
import lombok.Data;

import java.util.List;

/**
 * @author hewenjun
 * @version 1.0
 * @date 2022/06/23 16:08
 */
@Data
public class ReturnT {
    private Integer code; //默认值时0，因为Layui取table值时返回code不是0就会报错格式不正确
    private String msg;
    private Object data;
    private Integer count;
    private List result;

    public ReturnT(Integer code, String msg, Integer count, List result) { //返回code，msg，分页数据总条数， 分页数据
        this.code = code;
        this.msg = msg;
        this.count = count;
        this.data = result;
    }
    public ReturnT(Integer code) {
        this.code = code;
    }
    public ReturnT(Integer code, String msg) {
        this.code = code;
        this.msg = msg;
    }

    public ReturnT(int code, String msg, Object data) {
        this.code = code;
        this.msg = msg;
        this.data = data;
    }

    public static ReturnT error(){ return  new ReturnT(400); }
    public static ReturnT error(int code){ return  new ReturnT(code); }
    public static ReturnT error(String msg){
        return  new ReturnT(400, msg);
    }
    public static ReturnT error(int code, String msg){
        return  new ReturnT(code, msg, msg);
    }
    public static ReturnT error(String msg, Object data){
        return  new ReturnT(0, msg, data);
    }

    public static ReturnT success(int code){ return  new ReturnT(code);  }
    public static ReturnT success(String msg){ return  new ReturnT(0, msg);  }
    public static ReturnT success(String msg, Object data){  return  new ReturnT(0, msg, data);  }
    public static ReturnT success(int code, String msg){  return  new ReturnT(code, msg);  }

}

2.3 实体类

@Data
public class Qr extends Page implements Serializable {
	private String leadid;
	private String createTime;

    private String trayNo;
    private String trayDate;//Tray日期
}

3. Controller

@Resource
private QrService qrService;

@RequestMapping("/toQrEx") //跳转到demoHtm页面
    public ModelAndView toQrEx(Qr qrf, HttpServletRequest request){
        request.setAttribute("createTime", addDate(-1) + " ~ " + addDate(0)); //tray日期初始化
            return new ModelAndView("queryQrEx");
        
    }

 @GetMapping("/getQrExcList") //----异常数据查询
    ReturnT getQrExcList(Qr qrf) {
        return qrService.getQrExcList(qrf);
}




	/**
	 * 功能：指定日期加上指定天数
	 *
	 * @param date
	 *            日期
	 * @param day
	 *            天数
	 * @return 返回相加后的日期
	 */
public static Date addDate(Date date, int day) {
		Calendar c = Calendar.getInstance();
		c.setTimeInMillis(getMillis(date) + ((long) day) * 24 * 3600 * 1000);
		return c.getTime();
}

//获取服务器当前时间 + 天数   ---》如果是当前日期之前的某天那就传 负数 例如前一天 -1
public static String addDate(int days) {
		Date d =  addDate(new Date(), days);
		DateFormat df = new SimpleDateFormat(STR_YYYY_MM_DD);
		return df.format(d.getTime());
}

4. serviceImpl

public ReturnT getQrExcList(Qr ex) {
        if(null != ex.getLimit()){ //如果页面没有传limit那就不是表格查询，应该是导出所有，这时就不需要分页
            int currentPage = ex.getPage(); //如果是从数据页面点击异常数量跳转的page=0，因此需要赋值1，否则limit -20会报错
            ex.setPage((currentPage - 1) * ex.getLimit());
        }

        List<Qr> list = qrMapper.getQrExcList(ex);
        int count = qrMapper.getQrExcListCount(ex);
        return !list.isEmpty() ? new ReturnT(0, "获取成功", count, list) : ReturnT.error("无数据");
    }

5. mapper

 String PUBLIC_IF=  "<if test='trayNo !=null and trayNo != \"\"'> and tcpno = #{trayNo} </if>" +
            " <if test='createTime !=null and createTime != \"\" '>"
            + "    AND to_char(createTime,'YYYY-MM-DD') &gt;= substring(#{createTime}, 0, 11)" //数据库中的时间10位之前即可，前台传的有空格所以是11
            + "    AND to_char(createTime,'YYYY-MM-DD') &lt;= substring(#{createTime}, 14)"
            + " </if>" 
		   +	 " <if test='limit !=null'>  limit #{limit} offset #{page} </if>";
    @Select({"<script>select trayNo,leadid,createTime from tableName where 1=1 " + PUBLIC_IF + "</script>"})
    List<Qr> getQrExcList(Qr ex);

    @Select({"<script> SELECT COUNT(*) from tableName where 1=1  " + PUBLIC_IF  + " </script>" })
    int getQrExcListCount(Qr qr);

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/41293.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

zabbix监控自己

zabbix监控自己

目录 一、实验环境准备 二、server端 1、配置阿里云yum源 2、部署lamp环境 3、启动lamp对应服务 4、准备java环境 5、源码安装zabbix 6、mariadb数据库授权 7、创建zabbix程序用户并授权防止权限报错 8、修改zabbix配置文件 9、配置php与apache 10、web安装zabbix …
阅读更多...
Qgis3.16ltr+VS2017二次开发环境搭建（保姆级教程）

Qgis3.16ltr+VS2017二次开发环境搭建（保姆级教程）

1.二次开发环境搭建 下载osgeo4w-setup.exeDownload QGIShttps://www.qgis.org/en/site/forusers/download.html 点击OSGeo4W Network Installer 点击下载 OSGeo4W Installer 运行程序 osgeo4w-setup.exe&#xff0c;出现以下界面&#xff0c;点击下一页。 选中install from i…
阅读更多...
uniapp中超好用（且免费）的安全类插件推荐！（持续更新中）

uniapp中超好用（且免费）的安全类插件推荐！（持续更新中）

前几天写了一篇【干货分享】uniapp做的安卓App如何加固&#xff0c;发现收藏的人蛮多的。所以说&#xff0c;更加证明了我说的第一个问题&#xff1a;现在用uniapp的人是越来越多了。 而通过使用uniapp上自带的插件&#xff0c;也是能够实现事半功倍的效果&#xff0c;让不懂前…
阅读更多...
OpenCv之图像形态学(二)

OpenCv之图像形态学(二)

目录 一、形态学梯度 二、顶帽操作 三、黑帽操作 一、形态学梯度 梯度原图 - 腐蚀腐蚀之后原图边缘变小&#xff0c;原图 - 腐蚀 就可以得到腐蚀掉的部分&#xff0c;即边缘 案例代码如下: import cv2 import numpy as np# 导入图片 img cv2.imread(6.jpg)# 注意调节kern…
阅读更多...
ubuntu打开usb摄像头

ubuntu打开usb摄像头

文章目录 前言一、识别 usb 摄像头二、安装应用程序显示摄像头捕捉到的视频1、使用应用程序茄子&#xff08;cheese&#xff09;2、运行 cheese 捕捉视频 前言 记录一下解决在 Linux 下打开 usb 摄像头界面黑屏的问题。 一、识别 usb 摄像头 1、保持在 ubuntu 界面&#xff0…
阅读更多...
leetcode 965.单值二叉树

leetcode 965.单值二叉树

⭐️ 题目描述 &#x1f31f; leetcode链接&#xff1a;单值二叉树 思路&#xff1a; 让当前的根节点与左孩子节点与右孩子节点判断&#xff0c;若相等则继续向下分治&#xff0c;让左孩子与右孩子当作新的根节点继续判断&#xff0c;直到某个节点不相等。 1️⃣ 代码&#x…
阅读更多...
相机标定学习笔记

相机标定学习笔记

Kalibr 是标定工具中&#xff0c;唯一一个可以标定camToImu的&#xff0c;是vio必不可少的工具&#xff0c;其他的都有替代品。所以学习多种开源算法进行相机标定&#xff0c;并记录学习相机标定的过程。 一、相机标定 1、在场景中放置一个已知的物体 &#xff08;1&#xff…
阅读更多...
【DBA课程-笔记】第 3 章：MongoDB数据库核心知识

【DBA课程-笔记】第 3 章：MongoDB数据库核心知识

内容 一、MongoDB 数据库架构 A. MongoDB数据库体系架构 1. 存储引擎&#xff08;MongoDB Storage Engines&#xff09;&#xff1a; 2. MongoDB 数据逻辑架构 二、MongoDB 存储引擎 A. 查看mongodb服务器的状态 B. 查看引擎信息&#xff08;4.2.1 没有这个命令&#xf…
阅读更多...
实例019 以图形按钮显示的界面

实例019 以图形按钮显示的界面

实例说明 菜单和工具栏虽然能方便用户操作程序的相应功能&#xff0c;但各有缺点。如果采用按钮式功能菜单&#xff0c;不但美观大方&#xff0c;而且操作灵活。当单击按钮时&#xff0c;用户区将显示相应的操作按钮组。下面介绍图形界面式菜单的设计方法。运行本例&#xff0…
阅读更多...
ceph集群（二）

ceph集群（二）

ceph 一、资源池 Pool 管理二、创建 CephFS 文件系统 MDS 接口三、创建 Ceph 块存储系统 RBD 接口四、创建 Ceph 对象存储系统 RGW 接口五、OSD 故障模拟与恢复 一、资源池 Pool 管理 上次我们已经完成了 Ceph 集群的部署&#xff0c;但是我们如何向 Ceph 中存储数据呢&#x…
阅读更多...
餐饮行业油烟监控管理系统设计与应用

餐饮行业油烟监控管理系统设计与应用

安科瑞 华楠 摘 要&#xff1a;餐饮油烟污染问题已经成为城市环境污染的重要污染源&#xff0c;本研究的油烟在线监测数据管理信息系统是油烟在线监测数据采集仪的配套软件&#xff0c;用于展现现场端数据采集仪采集的数据&#xff0c;对数据采集仪进行远程控制&#xff0c;以…
阅读更多...
vue-cli多页面配置（vue2.0）

vue-cli多页面配置（vue2.0）

目录 概述 多页面的配置 步骤1&#xff1a;编写配置文件 vue.config.js 步骤2&#xff1a;在src目录下创建目录pages 步骤3&#xff1a;创建HTML文件&#xff08;主组件挂载点&#xff09; 测试 完毕&#xff0c;总结 概述 我们知道使用vue脚手架vue-cli创建的项目默认是…
阅读更多...
基于IPC-CFX的点对点通信C#

基于IPC-CFX的点对点通信C#

IPC-CFX有两种主要的通信方式&#xff0c;可以通过RabbitMQ发布和订阅&#xff0c;也可以通过request和response进行点对点的通信&#xff0c;本文主要讲的是点对点的通信方式。 在vscode里建立新的dotnet项目&#xff0c;可以通过终端输入dotnet new console来建立&#xff0c…
阅读更多...
如何实现CAN-SOME/IP通信路由测试

如何实现CAN-SOME/IP通信路由测试

区别于基于UDP的车内通信路由&#xff0c;基于SOME/IP协议的路由增加了服务发现&#xff08;Service Discovery&#xff09;和服务发布&#xff08;Service Publish&#xff09;&#xff0c;那对于测试工程师来说&#xff0c;怎么实现CAN-SOME/IP路由的测试呢&#xff1f; 01 …
阅读更多...
网络安全面试题

网络安全面试题

以下为网络安全各个方向涉及的面试题&#xff0c;星数越多代表问题出现的几率越大&#xff0c;祝各位都能找到满意的工作。 注&#xff1a;本套面试题&#xff0c;已整理成pdf文档&#xff0c;但内容还在持续更新中&#xff0c;因为无论如何都不可能覆盖所有的面试问题&#xf…
阅读更多...
45、Spring Boot自动配置原理

45、Spring Boot自动配置原理

Spring Boot自动配置原理 lmport Configuration Spring spi 自动配置类由各个starter提供&#xff0c;使用Configuration Bean定义配置类&#xff0c;放到META-INF/spring.factories下使用Spring spi扫描META-INF/spring.factories下的配置类使用lmport导入自动配置类
阅读更多...
C# WPF实现动画渐入暗黑明亮主题切换效果

C# WPF实现动画渐入暗黑明亮主题切换效果

C# WPF实现动画渐入暗黑明亮主题切换效果 效果图如下最近在Bilibili的桌面端看到一个黑白主题切换的效果感觉&#xff0c;挺有意思。于是我使用WPF尝试实现该效果。 主要的切换效果&#xff0c;基本实现不过还存在一些小瑕疵&#xff0c;比如字体等笔刷不能跟随动画进入进行切…
阅读更多...
手写数字识别Minst(CNN)

手写数字识别Minst(CNN)

文章目录 手写数字识别网络结构加载数据集数据集可视化CNN网络结构训练模型保存模型和加载模型测试模型 手写数字识别 网络结构 网上给出的基本网络结构&#xff1a; 然而在本数据集中&#xff0c;输入图不是1*32*32&#xff0c;是1*28*28。所以正确的网络结构应该是 level…
阅读更多...
好用的思维导图软件有哪些？这几款简单好用

好用的思维导图软件有哪些？这几款简单好用

好用的思维导图软件有哪些&#xff1f;思维导图是一种非常有用的思维工具&#xff0c;可以帮助我们组织和理清复杂的信息。在如今的数字时代&#xff0c;有很多软件可以帮助我们创建和编辑思维导图。下面介绍几款简单好用的思维导图软件。 第一款&#xff1a;迅捷画图 这是一款…
阅读更多...
生成式AI时代，亚马逊云科技致力推动技术的普惠，让更多企业受益

生成式AI时代，亚马逊云科技致力推动技术的普惠，让更多企业受益

当谈及AIGC时&#xff0c; 我们该谈些什么&#xff1f; 生成式AI技术与应用的不断发展&#xff0c;为各个行业都注入了全新的机会与活力。AIGC成为了今年最为激动人心的技术话题。亚马逊云科技也一马当先&#xff0c;在6月27-28日&#xff0c;2023亚马逊云科技中国峰会上分享…
阅读更多...
最新文章

Copyright @ 2022~2023