关于LayUI表格重载数据问题

目的

搜索框搜索内容重载数据只显示搜索到的结果

遇到的问题

在layui官方文档里介绍的table属性有data项,但使用下列代码

table.reload('test', {data:data  //data为json数据});

时发现,会会重新调用table.render的url拿到原来的数据,并不会显示出来传输的data数据,估计应该只有table.render有这个属性。

原因

table.reload执行会重新调用table.render来渲染实例

解决方案

可以使用where进行传参,然后后端判断Str就可以区分是哪里调用的了,具体参考后面代码

table.reload('test', {where: {Str: value},});

部分代码

表格和搜索框

<div style="padding: 16px;"><table class="layui-hide" id="test" lay-filter="test"></table>
</div>       <div class="layui-input-wrap" style="width: 300px;right: -80%;"><input type="text" id="searchtext" lay-affix="search"  lay-filter="search" lay-options="{split: true}" placeholder="搜索…" class="layui-input">
</div>

表格渲染

table.render({elem: '#test',url: '/GetAllTemp',method: 'post',toolbar: '#toolbarDemo',height: 'full-35',css: [ // 重设当前表格样式'.layui-table-tool-temp{padding-right: 145px;}'].join(''),cellMinWidth: 80,totalRow: true,page: true,cols: [[{type: 'checkbox', fixed: 'left'},{field:'id', fixed: 'left', width:100, title: '<%=ExamTemp.tid%>'},{field:'b', width:300, title: '<%=ExamTemp.tb%>'},{field:'c', width:250, title: '<%=ExamTemp.tc%>'},{field:'d', title:'<%=ExamTemp.td%>', width: 300},{field:'e', title:'<%=ExamTemp.te%>', width: 300},{fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#barDemo'}]],done: function(res, curr, count, origin){...

搜索框事件(表格重载数据)

           form.on('input-affix(search)', function(data){  // 搜索var elem = data.elem; // 输入框var value = elem.value; // 输入框的值if(!value){layer.msg('请输入搜索内容');return elem.focus()};// 搜索重载数据table.reload('test', {where: {Str: value},});});

后端 获取数据

判断一下Str是不是空的就可以区分是一开始渲染还是重载了

@WebServlet("/GetAllTemp")
public class GetAllTempServlet extends HttpServlet {AllTemplateService ats = new AllTemplateServiceImpl();@Overrideprotected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {req.setCharacterEncoding("utf-8");resp.setCharacterEncoding("utf-8");String Str = req.getParameter("Str");if (Str==null){int uid = Integer.parseInt(req.getSession().getAttribute("uid").toString());System.out.println("uid: "+uid);List<AllTemplate> allTemplates = ats.getAllTemp();JsonMassage<AllTemplate> JSM = new JsonMassage("0", "", allTemplates);String json = JSM.toJSONString();resp.getWriter().write(json);}else {List<AllTemplate> allTemplates = ats.getTempByStr(Str);JsonMassage<AllTemplate> JSM = new JsonMassage("0", "", allTemplates);String json = JSM.toJSONString();resp.getWriter().write(json);}}
}

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

新能源汽车冷却系统的水道管口类型有哪些?格雷希尔针对这些管口密封的快速接头有哪些?

对于新能源汽车&#xff0c;不仅电池&#xff0c;还有电机、电控、充电单元部件&#xff0c;都需要处于适宜的工作温度&#xff0c;才能维持整车的正常运行。而这些部件在运行过程中会产生大量的热量&#xff0c;如果不及时散热会对汽车的性能、寿命产生影响&#xff0c;甚至可…

css动态传参,attr的妙用

今天再做一个编辑器的功能的时候&#xff0c;发现有一段非常奇妙的代码&#xff0c;使用attr获取div标签的data-label值。 css的attr?What fuck?这又是什么鬼东西&#xff0c;emmm。 查询后官方是这么回答的&#xff1a; CSS 表达式 attr() 用来获取选择到的元素的某一 HTM…

Docker的一个简单例子(一)

文章目录 环境示例准备构建启动/停止容器更新应用分享应用 参考 环境 RHEL 9.3Docker Community 24.0.7 示例 准备 从github克隆 getting-started-app 项目&#xff1a; git clone https://github.com/docker/getting-started-app.git查看项目&#xff1a; ➜ getting-s…

Java基础02-Java编程基础

文章目录 变量&#xff08;Variables&#xff09;局部变量和成员变量局部变量&#xff08;Local Variables&#xff09;成员变量&#xff08;Instance Variables&#xff09; 标识符&#xff08;Identifiers&#xff09;八种基本数据类型原始数据类型&#xff08;Primitive Dat…

Java ArrayList解密

数组的大小是固定的&#xff0c;一旦创建的时候指定了大小&#xff0c;就不能再调整了。也就是说&#xff0c;如果数组满了&#xff0c;就不能再添加任何元素了。 ArrayList 在数组的基础上实现了自动扩容&#xff0c;并且提供了比数组更丰富的预定义方法&#xff08;各种增删改…

【Unity美术】Unity工程师对3D模型需要达到的了解【二】

&#x1f468;‍&#x1f4bb;个人主页&#xff1a;元宇宙-秩沅 &#x1f468;‍&#x1f4bb; hallo 欢迎 点赞&#x1f44d; 收藏⭐ 留言&#x1f4dd; 加关注✅! &#x1f468;‍&#x1f4bb; 本文由 秩沅 原创 &#x1f468;‍&#x1f4bb; 收录于专栏&#xff1a;Uni…

Git开发工具基本使用

文章目录 前言Git仓库基本概念基本环境安装清除原先配置生成秘钥配置Host添加公钥Github添加Gitee添加测试 本地仓库基本概览查看提交日志(log)版本回退添加文件至忽略列表分支分支冲突 远程仓库推送到远程仓库从远程仓库中抓取和拉取 在Idea中使用Git总结 前言 这里只是对Git…

从入门到精通UNet: 让你快速掌握图像分割算法

文章目录 一、UNet 算法简介1.1 什么是 UNet 算法1.2 UNet 的优缺点1.3 UNet 在图像分割领域的应用 二、准备工作2.1 Python 环境配置2.2 相关库的安装 三、数据处理3.1 数据的获取与预处理3.2 数据的可视化与分析 四、网络结构五、训练模型5.1 模型训练流程5.2 模型评估指标5.…

轻量封装WebGPU渲染系统示例<55>- 顶点数据更新

当前示例源码github地址: https://github.com/vilyLei/voxwebgpu/blob/feature/material/src/voxgpu/sample/VertexUpdateTest.ts 当前示例运行效果: ​​​​​​​ 此示例基于此渲染系统实现&#xff0c;当前示例TypeScript源码如下: export class VertexUpdateTest {pr…

App.vue中引入自定义组件

components目录中定义组件&#xff1a;Person.vue 目录截图&#xff1a; Person.vue文件中内容&#xff1a; <template><div class"person"><h2>姓名&#xff1a;{{name}}</h2><h2>年龄&#xff1a;{{age}}</h2><!--定义了…

数据的确权、流通、入表与监管研究(一):数据与确权(下)

关注WX公众号&#xff1a; commindtech77&#xff0c; 获得数据资产相关白皮书下载地址 1. 回复关键字&#xff1a;数据资源入表白皮书 下载 《2023数据资源入表白皮书》 2. 回复关键字&#xff1a;光大银行 下载 光大银行-《商业银行数据资产会计核算研究报告》 3. 回复关键字…

NX二次开发UFUN方式一键去除所有参数

一、概述 最近作了一个案例是通过遍历整个显示部件窗口的所有实体合并成一个部件&#xff0c;并且在导航器上也显示一个体&#xff0c;主要的思路是遍历当前所有实体&#xff0c;然后进行一键合并如图1所示&#xff0c;最后去除参数&#xff0c;这时导航器中显示一个体的记录。…