当前位置: 首页 > news >正文

关于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.lryc.cn/news/271433.html

相关文章:

  • MyBatis-mapper.xml配置
  • 【如何选择Mysql服务器的CPU核数及内存大小】
  • 【从浅到深的算法技巧】4.静态方法
  • YOLO手部目标检测
  • 网络IP地址如何更改?怎么使用动态代理IP提高网速?
  • Flink实时电商数仓之DWS层
  • MFC - CArchive/内存之间的序列化应用细节
  • C语言实验4:指针
  • 项目——————————
  • 【论文阅读】Realtime multi-person 2d pose estimation using part affinity fields
  • 图像分割实战-系列教程9:U2NET显著性检测实战1
  • RK3568平台 Android13 GKI架构开发方式
  • 阿里云服务器节省计划价格便宜_成本优化全解析
  • 3种依赖管理工具实现requirements.txt文件生成
  • 超图iClient3DforCesium地形、影像、模型、在线影像交互示例
  • 【解决】电脑上的WIFI图标不见了咋整?
  • 2 - 表结构 | MySQL键值
  • Redis(Linux版本7.2.3)
  • 八股文打卡day18——操作系统(1)
  • 设计模式—行为型模式之模板方法模式
  • 机器学习的分类与经典算法
  • 2.3物理层下面的传输媒体
  • 笙默考试管理系统-MyExamTest----codemirror(57)
  • Qt高质量的开源项目合集
  • HarmonyOS ARKUI深度解析:图像组件及权限配置实战指南
  • 萨姆·奥尔特曼的预言
  • iPhone 13 Pro 更换『移植电芯』和『超容电池』体验
  • JavaScript 常用事件演示
  • gzip引入后node_modules中.cache compression-webpack-plugin占用内存过多
  • Vue:使用IDEA开发Vue的相关配置