layui后台页面table展示数据后，按条件搜索table数据

最新推荐文章于 2024-04-23 09:49:03 发布
最新推荐文章于 2024-04-23 09:49:03 发布
阅读量714 收藏 1
点赞数 1
分类专栏： layui后台 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46248307/article/details/109526490
版权

页面效果
在这里插入图片描述
缘由：在下面的展示数据栏，在切换到其他分页的时候，数据显示成功，但通过上面的搜索功能查找单条数据的时候查找不到数据

解决方法：在搜索功能的的js中加入

  , page: {
     curr: 1 //重新从第 1 页开始
   }

结果，解决

紫渊ღ
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
layui的表格table选中数据后更改本行的颜色
10-17
在layui的表格table中，选中某行数据之后更改本行颜色，取消选中后恢复原样式。在layui的表格table中，选中某行数据之后更改本行颜色，取消选中后恢复原样式。
解决layui的table插件无法多层级获取json数据的问题
01-21
对于layui的table插件无法多层级获取json数据的解决方法,版本：2.2.6 根据官方文档 你接口返回的数据格式，遵循 response 对应的字段名称。 默认的格式为如下： { code: 0,//数据状态的字段名称，默认：code msg: ...
点击查找按钮,或者是打开页面就渲染出来数据的步骤
m0_47630333的博客
06-18 448
目的:点击查找按钮,根据条件进行筛选出数据,渲染到页面上 1 在el-table中标注数据 :data=“tableData” 在data中标明tableData:[ ] 2 请求接口,获取数据, 请求接口的url,methods,data,在这个data中注明你的双向绑定的数据,可以是{ }形式,可以是xx:xx形式 然后就是foreach循环 然后是this.tableData=res.data… 注意,想把数据根据网页上的数据一条一条渲染上,这时会根据el-table-column中的prop,把数据
使用layui实现表格搜索并显示最新结果
最新发布
奇妙的Bug之旅
04-23 936
通过以上步骤，我们成功地实现了一个使用layui框架的表格，并添加了搜索功能。用户可以在搜索框中输入关键字，点击搜索按钮后，表格会根据关键字进行过滤，并显示最新的结果。希望本文对您有所帮助！
Layui表单table渲染+条件查询
是个非常热爱生活、乐观、奋斗、努力的逗比青年
07-06 6425
🌼使用Layui的table组件进行表格渲染有以下几个优点：简单易用：Layui的table组件提供了简洁的API和丰富的配置选项，使得表格渲染变得简单易用。只需要设置好表格的数据源和列定义，就可以快速渲染出一个功能齐全的表格。支持分页：Layui的table组件内置了分页功能，可以轻松地实现对大量数据的分页显示。通过设置合适的参数，可以控制每页显示的数据量、当前页码、总页数等。支持排序和筛选：Layui的table组件支持对表格数据进行排序和筛选。
Vue的查询数据并且通过bootstarp-table把数据渲染
Itmei的博客
02-09 420
需求：把页面进行改造把apptoken，appkey列隐藏，并且更改该列为企业秘钥，列下显示查看公司秘钥如图： 点击按钮显示当前的企业秘钥： 1.首先改造JS代码： 首先把数据要渲染的visible设置为true需要的设置false， 主要的formatter: actionFormatter这个用于：格式化输出函数及其他 //操作栏的格式化 function actionFormatter(value, row, index) { console.log("列"+row,
layui table组件按条件查询的实现
知北行的博客
02-17 8330
主要是在后台实现数据的条件查询，然后将按条件查询出来的结果返回给前端，重载表格。 这里实现环境我使用的是.net mvc框架。 1.首先定义查询按钮; <button id="reloadBtn" class="layui-btn" data-type="reload">搜索</button> 2.定义要查询时需要传递的值，比如我这里是针对工夹具的某个属性，主要传递两个值...
SpringBoot+layui实现表格数据渲染和条件查询时Thymeleaf模板报错
Ripple的博客
09-15 372
【代码】SpringBoot+layui实现表格数据渲染和条件查询时Thymeleaf模板报错。
vue element-ui el-table 表头筛选 配合接口数据渲染/以及多个筛选条件的情况
buukyjmvni的博客
01-04 3179
一、table设置监听事件（@filter-change）、想要筛选的列设置过滤条件（:filters） <el-table :data="columns" border @filter-change="filterHandler" //监听事件 style="width: 100%" max-height="500" :row-style="{ heig
layui table 方法渲染 筛选重载和搜索重载实现
01-15 1万+
公司产品选用的技术栈包含了layui传送门，这是一个简洁大方地前端ui框架，上手简单，开源，长期维护，并且有社区FLY。 layui有许多问题，但是能被解决的问题都不算问题，只不过需要你仔细看文档，经常逛社区。 这里给大家介绍它的table模块，因为我在使用中遇到了许多问题，这里做汇总。 1、表格方法渲染（使用内置的ajax） table模块最实用的功能就是避免我们ajax通信后还要依据解析数据手...
layui实现数据表格table的搜索功能
热门推荐
changyana的博客
01-30 3万+
layui根据特定信息对表格进行搜索并显示效果实现html部分js部分注意总结 效果 先放效果图 此处根据“角色名称”进行搜索，得到效果 实现 html部分 此处注意！！需要要为input、table里边加上“id”属性，在js部分需要特定进行获取。 <div class="layuimini-container"> <div class="layuimini-main"> <fieldset class="table-search-fieldset
vue element-UI条件查询渲染到table表格
wwwkm123的博客
12-09 3981
table表格数据 对应表格某行操作时的编辑和删除按钮 editForm表单 把对table表格某行数据的获取和渲染到editForm表单 store里面的actions模块里的方法 api.user.js里的findPrimaryKey方法 出现的问题：点击编辑按钮通过$index,row定位到ListUser的某行 （ListUser[index]）并且把所有数据渲染到编辑模态框（this.editForm=JSON.parse(JSON.stringfy(LIstU
layui-table对返回的数据进行转变显示的实例
10-16
layui-table 是一款基于 layui 框架的表格组件，它提供了丰富的功能，如数据加载、分页、排序、筛选等。在实际应用中，我们往往需要根据后端返回的数据进行定制化显示，以满足界面展示的需求。本篇将详细介绍如何...
Layui数据表格 前后端json数据接收的方法
12-30
先上效果图： 前端数据表格： <%-- 数据表格 --%> <table class=layui-table lay-data={ lay-filter=test> <thead>
layui数据表格重载实现往后台传参
12-30
1、网上的代码： 搜索商户： <div class=layui-inline> <input class=layui-input name=keyword id=demoReload autocomplete=off> <button class=layui-btn ...var table = layui.table; //方法级渲染 t
layui table数据渲染页面+筛选医生+在筛选日期一条龙
weixin_33819479的博客
11-01 74
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, min...
layui的table查询编辑&tableSelect控件使用
代码笔记
06-21 3507
【代码】layui的table查询编辑&tableSelect控件使用。
layui实现table表格的“关键字搜索”功能
温情亿度网络科技
05-09 8779
最近在做一个项目里，正好用到了layui的分页。但是在做分页关键字查询时，遇到了几个问题。第一个参数的传递，第二个数据的嗮选，第三个数据的返回，第四个数据的重新加载。 如下是解决方案的js代码，和大家分享。 layui.use('table', function(){ var table = layui.table; table....
layui tableSelect 数据表格下拉框 条件查询
qq_36636312的博客
10-16 9902
效果图： 步骤 1，引入插件tableSelect layui.config({ base: '/static/layui-v2.5.6/ext/',// 第三方模块所在目录 version: 'v1.5.10' // 插件版本号 }).extend({ soulTable: 'soulTable/soulTable', tableChild: 'soulTable/tableChild', tableMerge: '
layui table 下拉框数据字典翻译后回显
06-09
您好，针对您的问题，我可以给出以下思路： 1. 在 layui table 中使用下拉框，需要定义一个对应的 render 函数，在 render 函数中渲染下拉框，并将下拉框的值设置为对应的字典值。 2. 在进行数据字典翻译时，需要先将字典数据加载到前端，可以使用 ajax 请求后台接口获取字典数据。 3. 在进行表格数据渲染时，可以通过遍历表格数据，将需要翻译的字段进行翻译，并将翻译后的值设置为对应的下拉框选项。 下面是一个简单的示例代码，仅供参考： ```javascript // 定义一个字典数据对象 var dictData = { 1: '男', 2: '女' }; // 定义下拉框的 render 函数 function renderSelect(d) { var html = '<select lay-ignore>'; for (var key in dictData) { var selected = key == d.gender ? 'selected' : ''; html += '<option value="' + key + '" ' + selected + '>' + dictData[key] + '</option>'; } html += '</select>'; return html; } // 加载字典数据 $.ajax({ type: 'GET', url: '/dict/list', success: function(res) { dictData = res.data; } }); // 渲染表格 table.render({ elem: '#demo', cols: [[ {field: 'name', title: '姓名'}, {field: 'age', title: '年龄'}, {field: 'gender', title: '性别', templet: renderSelect} ]], data: [ {name: '张三', age: 18, gender: 1}, {name: '李四', age: 20, gender: 2}, {name: '王五', age: 22, gender: 1} ], done: function(res, curr, count) { // 在表格渲染完成后，遍历表格数据，将需要翻译的字段进行翻译 $('.layui-table-body table tr').each(function() { var genderTd = $(this).find('td[data-field="gender"]'); var genderValue = genderTd.text().trim(); genderTd.html(dictData[genderValue]); }); } }); ``` 以上代码仅供参考，具体实现需要根据您的实际需求进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值