layui中渲染table表格

页面布局

可直接根据文档要求去写 table 组件(这个不重要)

<table lay-filter="SyDictTable" id="SyDictTable" lay-data="{id: 'SyDictTable'}"></table>

Js

重要的是去修改JS里面的东西,比如:code码、分页这些文档里是没有的


<script>layui.use(['table','jquery'], function () {var testTable=layui.table;var $ = layui.jquery// 初始化渲染表格testTable.render({elem: '#SyDictTable',id:'SyDictTable',url: ctx + 'list', // 测试接口// 修改分页参数(因为layui中页数参数跟后端接口参数不一至)request: {pageName: 'pageNum',limitName: 'pageSize'},//  反正就是需要配合layui中的规则(正常的code返回200就可以拿数据,但是layui中                                    code为0才是成功)parseData:function(res){return{"code": res.code == "200" ? 0 : res.code,"count": res.data.total,"data": res.data.rows}},// 表头数据(必须是一个二维数组,具体可看文档描述)cols:[[{field:"dictName",title:"字典名称",unresize:true},{field:"dictCode",title:"字典编码",unresize:true},]],//  分页设置(具体看文档描述)page:{limits: [5, 10, 100, 200], limit: 10 //每页默认显示的数量},//  请求接口所需要的参数where: parameterFun()});//  参数(比如在渲染表格时会根据一些参数去渲染不同的数据)// 比如会根据 select 选择的内容去渲染数据function parameterFun(){var selectVal = $('#select').val()var params={//  selectText 是接口需要传递的字段名称"selectText" : selectVal }return params})}
</script>

有帮助的点个赞赞 !!!

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

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

相关文章

LeetCode 0822. 翻转卡片游戏:双O(n)的做法

【LetMeFly】822.翻转卡片游戏&#xff1a;双O(n)的做法 力扣题目链接&#xff1a;https://leetcode.cn/problems/card-flipping-game/ 在桌子上有 N 张卡片&#xff0c;每张卡片的正面和背面都写着一个正数&#xff08;正面与背面上的数有可能不一样&#xff09;。 我们可以…

动态开点线段树

防止原来的区间太大(比如n的范围为1e9&#xff0c;询问的个数为1e5)&#xff0c;此时我们就可以动态开点&#xff0c;防止普通线段树的空间过大导致MLE。 题目链接&#xff1a;E. Physical Education Lessons 区间查询&#xff0c;区间修改&#xff1a; #include <bits/s…

飞凌嵌入式「国产」平台大盘点(二)全志系列

在上篇文章中&#xff0c;小编带大家一起盘点了飞凌嵌入式国产平台中的瑞芯微系列核心板。本篇文章&#xff0c;将继续为大家介绍的是全志系列核心板&#xff0c;话不多说&#xff0c;上干货&#xff01; 全志科技 飞凌嵌入式 飞凌嵌入式与全志科技的合作始于2019年&#xff…

Opencv C++实现yolov5部署onnx模型完成目标检测

代码分析&#xff1a; 头文件 #include <fstream> //文件 #include <sstream> //流 #include <iostream> #include <opencv2/dnn.hpp> //深度学习模块-仅提供推理功能 #include <opencv2/imgproc.hpp> //图像处理模块 #include &l…

AI 绘画Stable Diffusion 研究(四)sd文生图功能详解(上)

大家好&#xff0c;我是风雨无阻。 通过前面几篇AI 绘画Stable Diffusion 研究系列的介绍&#xff0c;我们完成了Stable Diffusion整合包的安装、模型ControlNet1.1 安装、模型种类介绍与安装&#xff0c;相信看过教程的朋友们&#xff0c;手上已经有可以操作实践的Stable Diff…

论文阅读-BotPercent: Estimating Twitter Bot Populations from Groups to Crowds

目录 摘要 引言 方法 数据集 BotPercent架构 实验结果 活跃用户中的Bot数量 Bot Population among Comment Sections Bot Participation in Content Moderation Votes Bot Population in Different Countries’ Politics 论文链接&#xff1a;https://arxiv.org/pdf/23…

HTML 元素的属性有哪些?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ class⭐ id⭐ style⭐ src⭐ href⭐ alt⭐ width和height⭐ disabled⭐ value⭐ required⭐ placeholder⭐ checked⭐ selected⭐ target⭐ colspan和rowspan⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得…

争夺年度智能汽车「中间件」方案提供商TOP10,谁率先入围

进入2023年&#xff0c;整车电子架构升级进入新周期&#xff0c;无论是智能驾驶、智能座舱、车身控制还是信息网络安全&#xff0c;软件赋能仍是行业的主旋律。 作为智能汽车赛道的第三方研究咨询机构&#xff0c;高工智能汽车研究院持续帮助车企、投资机构挖掘具备核心竞争力…

C#实现多线程局域网扫描器的思路与具体代码

C#实现多线程局域网扫描器的思路与具体代码 思路&#xff1a; 获取局域网内所有 IP 地址遍历所有 IP 地址&#xff0c;使用 Ping 命令测试主机是否在线如果主机在线&#xff0c;则扫描主机上的所有端口&#xff0c;确定哪些端口是开放的输出扫描结果 在上述过程中&#xff0…

maven中的scope

1、compile&#xff1a;默认值&#xff0c;可省略不写。此值表示该依赖需要参与到项目的编译、测试以及运行周期中&#xff0c;打包时也要包含进去。 2、test&#xff1a;该依赖仅仅参与测试相关的工作&#xff0c;包括测试代码的编译和执行&#xff0c;不会被打包&#xff0c;…

实例030 窗口颜色的渐变

实例说明 在程序设计时&#xff0c;可以通过设置窗体的BackColor属性来改变窗口的背景颜色。但是这个属性改变后整个窗体的客户区都会变成这种颜色&#xff0c;并且非常单调。如果窗体的客户区可以向标题栏一样能够体现颜色的渐变效果&#xff0c;那么窗体风格将会另有一番风味…

2024年浙财MBA项目招生信息全面了解

2024年全国管理类硕士联考备考已经到了最火热的阶段&#xff0c;不少考生开始持续将注意力集中在备考的规划中&#xff01;杭州达立易考教育整合浙江省内的MBA项目信息&#xff0c;为大家详细梳理了相关报考参考内容&#xff0c;方便大家更好完成择校以及针对性的备考工作。本期…

京东开源的、高效的企业级表格可视化搭建解决方案:DripTable

DripTable 是京东零售推出的一款用于企业级中后台的动态列表解决方案&#xff0c;项目基于 React 和 JSON Schema&#xff0c;旨在通过简单配置快速生成页面动态列表来降低列表开发难度、提高工作效率。 DripTable 目前包含以下子项目&#xff1a;drip-table、drip-table-gene…

静态网页加速器:优化性能和交付速度的 Node.js 最佳实践

如何使用 Node.js 发布静态网页 在本文中&#xff0c;我们将介绍如何使用 Node.js 来发布静态网页。我们将创建一个简单的 Node.js 服务器&#xff0c;将 HTML 文件作为响应发送给客户端。这是一个简单而灵活的方法&#xff0c;适用于本地开发和轻量级应用。 1、创建静态网页…

Linux中提示No such file or directory解决方法

说明&#xff1a; 在linux下&#xff0c;./xxx.sh执行shell脚本时会提示No such file or directory。但shell明明存在&#xff0c;为什么就是会提示这个呢&#xff1f; 这种其实是因为编码方式不对&#xff0c;如你在win下编辑sh&#xff0c;然后直接复制到linux下面 实现&…

机器学习笔记之优化算法(九)收敛速度的简单认识

机器学习笔记之优化算法——收敛速度的简单认识 引言收敛速度的判别标准 Q \mathcal Q Q-收敛速度 R \mathcal R R-收敛速度关于算法复杂度与收敛速度 引言 本节对收敛速度简单介绍。 收敛速度的判别标准 我们之前几节介绍了线搜索方法 ( Line Search Method ) (\text{Line …

leetcode----JavaScript 详情题解(2)

目录 2629. 复合函数 2631. 分组 2634. 过滤数组中的元素 2635. 转换数组中的每个元素 2637. 有时间限制的 Promise 对象 2648. 生成斐波那契数列 2649. 嵌套数组生成器 2665. 计数器 II 2666. 只允许一次函数调用 2629. 复合函数 恒等函数 在数学里&#xff0c;恒等函…

kubectl get node notReady | network not ready | kube-flannel not ready

问题 # 查看 node 状态 notReady [rootlocalhost ~]# kubectl get node NAME STATUS ROLES AGE VERSION node1 NotReady control-plane 31m v1.27.4 # 查看详细信息 network not ready [rootlocalhost ~]# kubectl describe node node1 Name: …

【Linux命令200例】awk文本处理工具的系统与实战讲述(常用)

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f3c6;本文已…

美团基础架构面经总结汇总

美团基础架构的面经。 问的全是基础,一个编程语言的问都没有。 问题记录 MySQL-MVCC InooDB是通过 MVCC 实现可重复读的隔离级别的,MVCC 就是多版本并发控制,它其实记录了历史版本的数据,解决了读写并发冲突问题。有一个版本编码,然后它进入了各种操作下的数据状态,能…