layui各种事件无效（例如表格重载或 分页插件按钮失效）的解决方法
下图是我一个系统的操作日志，在分页插件右下角嵌入了一个导出所有数据的按钮 ，代码没有任何问题，点击导出按钮却失效
排查之后，发现表格标签table定义了ID又定义了lay-filter，因我使用的layui从2.7.6升级到2.8.11，升级2.8+之后新增了ID，与原本的lay-filter功能基本一致，也就是定义了ID就不要定义lay-filter，否则例如我下面的id与lay-filter都定义不一致，导致定义的方法如果绑定的是表格的ID那么就会造成事件失效，解决办法要么删除id要么删除lay-filter
<table class="layui-hide" id="currentTableId" lay-filter="logTable" lay-size="sm"></table>完整html代码：
<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>操作日志</title><!-- 请勿在项目正式环境中引用该 layui.css 地址 --><link href="layui/css/layui.css" rel="stylesheet"><style>/*表格标题样式*/.layui-table-tool-temp {text-align: center;font-size: 20px;font-weight: 600;color: #5d9d87;}.layui-table-cell {font-size: 8px;height: 30px;line-height: 24px;padding: 2px 2px;}.layui-form-item {margin-bottom: 0px; }</style>
</head>
<body>
<div class="layui-form-item layui-form" style="margin-top:5px" lay-filter="logFormFilter"> <!--必须在表单中添加layui-form的class，否则提交的时候无法获取到任何值，无法识别为form表单--><div class="layui-form-item" style="margin:0"><div class="layui-inline"><label class="layui-form-label" style="width: 100px;" >操作时间</label><div class="layui-input-inline" style="width: 180px;margin-right:0px;"><input id="createDate" name="createDate" class="layui-input" autocomplete="off"/></div></div><div class="layui-inline"><label class="layui-form-label">操作类型</label><div class="layui-input-inline"><select id="type" name="type" lay-search="" ><option value="">搜索或选择操作类型</option><option th:each="type:${types}" th:value="${type}" th:text="${type}"></option></select></div></div><div class="layui-inline"><div class="layui-input-group"><div class="layui-input-prefix"> 操作用户 </div><input name="username" placeholder="输入用户工号或名字" class="layui-input"><div class="layui-input-split layui-input-suffix" style="cursor: pointer;background: aquamarine;" id="searchSubmit" lay-submit lay-filter="searchSubmit"><i class="layui-icon layui-icon-search"></i></div></div></div></div>
</div>
<script type="text/html" id="logToolbar">操作日志 <!--工具栏中添加搜索框，非laydate都没问题，否则会出现时间框无效-->
</script>
<table id="logList" lay-size="sm"></table>
<script type="text/html" id="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(['form','laydate','table'], function(){var laydate = layui.laydate, table = layui.table, form = layui.form;//操作日期初始化laydate.render({elem: '#createDate',range: '~',value: [[${createDate}]] //初始化日期,max:0 //最大日期只能选择当天,rangeLinked: true // 开启日期范围选择时的区间联动标注模式 --- 2.8+ 新增});table.render({elem: '#logList',url:'/getSysLog',method: 'post', //默认：get请求cellMinWidth: 80,page: true,limit: 20,limits: [20, 50, 100],title: '操作日志',where: {createDate : [[${createDate}]] },toolbar: '#logToolbar',pagebar: '#pagebar', // 分页栏模板even: true, //开启隔行背景cols: [[{type:'numbers'},{field:'model', title:'模块', width:160},{field:'type', title:'类型', sort:true, width:70},{field:'description', title:'描述', width:146},{field:'url', title: 'Url', width:128},{field:'method', title:'方法', width:220},{field:'params', title:'参数'},{field:'result', title:'结果' },{field:'username', title:'操作用户', width:100},{field:'ip', title:'IP', width:100},{field: 'createDate', width:120, title: '操作时间', sort: true, templet: "<div>{{layui.util.toDateString(d.createDate, 'yyyy-MM-dd HH:mm:ss')}}</div>"}]],done: function(res, curr, count){pageCurr=curr;}});//监听搜索框form.on('submit(searchSubmit)', function(data){//重新加载tabletable.reload('logList',{ //重新加载tablewhere: data.field, page: {curr: 1 //重新从第 1 页开始,如果当前是第10页，再次根据其他条件查询可能无法查询到第10页的数据,翻页时并不会触发跳到第1页}});return false;});// 底部分页栏事件table.on('pagebar(logList)', function(obj){debugger;var eventValue = obj.event; // 获得按钮 lay-event 值if(eventValue == 'export'){$.post('/getSysLog', form.val('logFormFilter'), function(res) {if(res.code==0){table.exportFile('logList', res.data, 'xls'); //表名 数据 格式}else{layer.msg(res.msg, {icon: 5});}})}});});</script>
</body>
</html>相关文章：
layui各种事件无效（例如表格重载或 分页插件按钮失效）的解决方法
下图是我一个系统的操作日志，在分页插件右下角嵌入了一个导出所有数据的按钮 ，代码没有任何问题，点击导出按钮却失效 排查之后，发现表格标签table定义了ID又定义了lay-filter，因我使用的layui从2.7.6升级到2.8.11&…...
flutter开发实战-父子Widget组件调用方法
flutter开发实战-父子Widget组件调用方法 在最近开发中遇到了需要父组件调用子组件方法，子组件调用父组件的方法。这里记录一下方案。 一、使用GlobalKey 父组件使用globalKey.currentState调用子组件具体方法，子组件通过方法回调callback方法调用父组…...
策略模式的实现与应用：掌握灵活算法切换的技巧
文章目录 常用的设计模式有以下几种：一.创建型模式（Creational Patterns）：二.结构型模式（Structural Patterns）：三.行为型模式（Behavioral Patterns）：四.并发…...
当ChatGPT应用在汽车行业，具体有哪些场景？
ChatGPT有潜力彻底改变汽车行业并将其提升到新的高度。在ChatGPT的加持下，该行业的多个领域都将取得重大变化。 利用ChatGPT作更高级的虚拟助理 你可能用过现有的虚拟助理，它们一系列的回复有时候让人不得不感叹一句“人工智障”！然而&a…...
行为型-中介者模式（Mediator Pattern）
概述 中介者模式（Mediator Pattern）是一种行为型设计模式，它通过封装一系列对象之间的交互方式，使这些对象能够互相通信而不需要直接相互引用。中介者模式通过集中控制对象的交互，使得对象之间的耦合度降低࿰…...
Kibana+Prometheus+node_exporter 监控告警部署
下载好三个软件包 一、prometheus安装部署 1、解压 linxxubuntu:~/module$ tar -xvf prometheus-2.45.0-rc.0.linux-amd64.tar.gz 2、修改配置文件的IP地址 # my global config global:scrape_interval: 15s # Set the scrape interval to every 15 seconds. Default is ever…...
【前端知识】JavaScript——设计模式（工厂模式、构造函数模式、原型模式）
【前端知识】JavaScript——设计模式（工厂模式、构造函数模式、原型模式） 一、工厂模式 工厂模式是一种众所周知的设计模式，广泛应用于软件工程领域，用于抽象创建特定对象的过程。 优点：可以解决创建多个类似对象的…...
未来的算法备案法规：创新和安全如何兼顾？
随着科技的快速发展，算法正逐步渗透到我们生活的各个方面，从推荐引擎到自动驾驶，从医疗诊断到金融交易，这一现象既充满希望，也充满了挑战。其中一个关键的挑战就是如何设计和实施有效的算法备案法规，以促进…...
pycharm 使用远程服务器 jupyter （本地jupyter同理）
1. 远程服务器miniconda 环境中创建jupyter环境 # 1. 激活环境 conda activate envname#2. 在环境中安装jupyter pip install jupyter # 或者 conda install jupyter#3. 生成jupyter_notebook_config.py文件 jupyter notebook --generate-config#4. 设置密码 jupyter noteboo…...
leetcode 376. 摆动序列
2023.7.28 本题思路是定义一个 direct变量记录上一次摆动是上坡还是下坡 。 然后在一个for循环中循环判断当前摆动和上一次摆动是否一致，如果不一致则视为一次摆动。 如果前后元素值相等得话，直接continue进入下一次循环。 下面看代码： clas…...
【图像处理】使用自动编码器进行图像降噪（改进版）
阿里雷扎凯沙瓦尔兹 一、说明 自动编码器是一种学习压缩和重建输入数据的神经网络。它由一个将数据压缩为低维表示的编码器和一个从压缩表示中重建原始数据的解码器组成。该模型使用无监督学习进行训练，旨在最小化输入和重建输出之间的差异。自动编码器可用于降维、…...
MySQL大数据量分页查询方法及其优化
---方法1: 直接使用数据库提供的SQL语句 ---语句样式: MySQL中,可用如下方法: SELECT * FROM 表名称 LIMIT M,N ---适应场景: 适用于数据量较少的情况(元组百/千级) ---原因/缺点: 全表扫描,速度会很慢 且 有的数据库结果集返回不稳定(如某次返回1,2,3,另外的一次返回2,1,3). L…...
dataTable转成对象、json、list
datatable转换成list集合 public static T TableToEntity<T>(DataTable dt, int rowindex 0, bool isStoreDB true){Type type typeof(T);T entity Activator.CreateInstance<T>();if (dt null){return entity;}DataRow row dt.Rows[rowindex];PropertyInfo…...
ubuntu环境安装centos7虚拟机网络主机不可达，ping不通
【NAT模式下解决】1.首先vi /etc/sysconfig/network-scripts/ifcfg-ens33检查ONBOOTyes，保存 2.输入systemctl restart network命令重启网关...
STN：Spatial Transformer Networks
1.Abstract 卷积神经网络缺乏对输入数据保持空间不变的能力，导致模型性能下降。作者提出了一种新的可学习模块，STN。这个可微模块可以插入现有的卷积结构中，使神经网络能够根据特征图像本身，主动地对特征图像进行空间变换&#x…...
C语言学习笔记 VScode设置C环境-06
目录 一、下载vscode软件 二、安装minGW软件 三、VS Code安装C/C插件 3.1 搜索并安装C/C插件 3.2 配置C/C环境 总结 一、下载vscode软件 在官网上下载最新的版本 Download Visual Studio Code - Mac, Linux, Windowshttps://code.visualstudio.com/download 二、安装minGW…...
alias取别名后，另一个shell中和shell脚本中不生效的问题以及crontab执行docker失败问题
目录 问题一：用alias取别名后，另一个shell中不生效描述原因解决 问题二：用alias取别名后，别名在脚本中不生效描述原因解决 问题三：crontab计划任务不能运行docker命令描述原因解决 问题一：用alias取别名后&…...
Shell ❀ 一键配置Iptables规则脚本 (HW推荐)
文章目录 注意事项1. 地址列表填写规范2. 代码块3. 执行结果4. 地址与端口获取方法4.1 tcpdump抓包分析（推荐使用）4.2 TCP连接分析（仅能识别TCP连接） 注意事项 请务必按照格式填写具体参数，否则会影响到匹配规则的创建…...
linux服务器查找大文件及删除文件后磁盘空间没有得到释放
1、查询服务器中大于1G的文件 find / -type f -size 1G这条命令是查询自”/”根目录下所有大小超过1G的文件，查询的大小可以根据需要改变，如下： 相关查询：查询服务器中大于100M的文件 find / -type f -size 100M2、查询服务器中…...
Java那些“锁”事 - 死锁及排查
死锁是两个或者两个以上的线程在执行过程中，因争夺资源而造成的一种互斥等待现象，若没有外界干涉那么它们将无法推进下去。如果系统资源不足，进程的资源请求都得到满足，死锁出现的可能性就很低，否则就会因为争夺有限的…...
装饰模式（Decorator Pattern）重构java邮件发奖系统实战
前言 现在我们有个如下的需求，设计一个邮件发奖的小系统， 需求 1.数据验证 → 2. 敏感信息加密 → 3. 日志记录 → 4. 实际发送邮件 装饰器模式（Decorator Pattern）允许向一个现有的对象添加新的功能，同时又不改变其…...
【android bluetooth 框架分析 04】【bt-framework 层详解 1】【BluetoothProperties介绍】
1. BluetoothProperties介绍 libsysprop/srcs/android/sysprop/BluetoothProperties.sysprop BluetoothProperties.sysprop 是 Android AOSP 中的一种 系统属性定义文件（System Property Definition File），用于声明和管理 Bluetooth 模块相…...
C++.OpenGL （10/64）基础光照（Basic Lighting）
基础光照（Basic Lighting） 冯氏光照模型（Phong Lighting Model） #mermaid-svg-GLdskXwWINxNGHso {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-GLdskXwWINxNGHso .error-icon{fill:#552222;}#mermaid-svg-GLd…...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
CMake 从 GitHub 下载第三方库并使用
有时我们希望直接使用 GitHub 上的开源库，而不想手动下载、编译和安装。 可以利用 CMake 提供的 FetchContent 模块来实现自动下载、构建和链接第三方库。 FetchContent 命令官方文档✅ 示例代码 我们将以 fmt 这个流行的格式化库为例，演示如何： 使用 FetchContent 从 GitH…...
有限自动机到正规文法转换器v1.0
1 项目简介 这是一个功能强大的有限自动机（Finite Automaton, FA）到正规文法（Regular Grammar）转换器，它配备了一个直观且完整的图形用户界面，使用户能够轻松地进行操作和观察。该程序基于编译原理中的经典…...
重启Eureka集群中的节点，对已经注册的服务有什么影响
先看答案，如果正确地操作，重启Eureka集群中的节点，对已经注册的服务影响非常小，甚至可以做到无感知。 但如果操作不当，可能会引发短暂的服务发现问题。 下面我们从Eureka的核心工作原理来详细分析这个问题。 Eureka的…...
【笔记】WSL 中 Rust 安装与测试完整记录
#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统：Ubuntu 24.04 LTS (WSL2)架构：x86_64 (GNU/Linux)Rust 版本：rustc 1.87.0 (2025-05-09)Cargo 版本：cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...
深入浅出深度学习基础：从感知机到全连接神经网络的核心原理与应用
文章目录 前言一、感知机 (Perceptron)1.1 基础介绍1.1.1 感知机是什么？1.1.2 感知机的工作原理 1.2 感知机的简单应用：基本逻辑门1.2.1 逻辑与 (Logic AND)1.2.2 逻辑或 (Logic OR)1.2.3 逻辑与非 (Logic NAND) 1.3 感知机的实现1.3.1 简单实现 (基于阈…...
永磁同步电机无速度算法--基于卡尔曼滤波器的滑模观测器
一、原理介绍 传统滑模观测器采用如下结构： 传统SMO中LPF会带来相位延迟和幅值衰减，并且需要额外的相位补偿。 采用扩展卡尔曼滤波器代替常用低通滤波器(LPF)，可以去除高次谐波，并且不用相位补偿就可以获得一个误差较小的转子位…...