Layui的table数据渲染不显示是怎么回事?

article/2025/9/17 3:13:10

😇作者介绍:一个有梦想、有理想、有目标的,且渴望能够学有所成的追梦人。

🎆学习格言:不读书的人,思想就会停止。——狄德罗

⛪️个人主页:进入博主主页

🗼推荐系列:点击进入推荐系列

🌼欢迎小伙伴们访问到博主的文章内容,在浏览阅读过程发现需要纠正的地方,烦请指出,愿能与诸君一同成长!

目录

文章内容如下

✏️前言

✏️一、问题原因

✏️二、解决方案

✏️总结


文章内容如下


✏️前言

 🌼一般出现这个问题是因为后台返回数据与table规定格式不符合。

👉没解决前

👉解决之后

 🌼这个返回的数据不符合规范,正确的成功状态码应为:code:“0”,可能会有很多没遇到过这样问题的人,一时间就蒙了,心里想:“这是什么鬼,我返回的分页状态码 不是200么?为什么会是0”;不要慌,半杯可可告诉你是怎么回事,原因,是因为后台返回数据与table规定格式不符合;


✏️一、问题原因

🌼首先就是你后台返回成功(code)的数据一定是200

👉如果你这个返回数据是“200”,还是出现这种问题,就是你没有在渲染table的时候没有修改code默认返回状态码,Layui默认返回状态码是“0”,所以在你使用layui渲染数据的时候,要修改code默认的状态码为“200” ;


✏️二、解决方案

🌼下面是配置(很重要,配置不好数据就不会显示),一定要按照我的来哈!
response不配置会显示接口调用成功,有返回数据,但是不渲染页面

  parseData:function (res){console.log(res);return{"code" : res.code, //解析接口状态"count":res.count, //解析总页数"msg" : res.msg, //解析提示文本"data" : res.data //解析数据列表}},response:{statusName:'code', //规定返回的状态码字段为codestatusCode:200 //规定成功的状态码味200},

下面有个完整点的写法,不知道在哪里配置的,看我下面这一段

🌼完整的

layui.use(['table', 'dropdown'], function(){var table = layui.table;var dropdown = layui.dropdown;// 创建渲染实例table.render({elem: '#test',url:'xxx', // 此处为静态模拟数据,实际使用时需换成真实接口toolbar: '#toolbarDemo',defaultToolbar: ['filter', 'exports', 'print', {title: '提示',layEvent: 'LAYTABLE_TIPS',icon: 'layui-icon-tips'}],height: 'full-35', // 最大高度减去其他容器已占有的高度差css: [ // 重设当前表格样式'.layui-table-tool-temp{padding-right: 145px;}'].join(''),cellMinWidth: 120,page: true,parseData:function (res){console.log(res);return{"code" : res.code, //解析接口状态"count":res.count, //解析总页数"msg" : res.msg, //解析提示文本"data" : res.data //解析数据列表}},response:{statusName:'code', //规定返回的状态码字段为codestatusCode:200 //规定成功的状态码味200},cols: [[{type: 'checkbox', fixed: 'left'},{field:'userId', fixed: 'left', width:80, title: 'ID'},{field:'userName', width:80, title: '用户'},{field:'userEmail', width:80, title: '邮箱地址'},{field:'userPassword', width:80, title: '用户密码'},{field:'userNickname', width:80, title: '昵称'},{field:'userPhone', width:80, title: '手机号'},{field:'userIdCard', width:80, title: '身份证'},{field:'userState', width:80, title: '状态'},{field:'roleId', width:80, title: '角色id'},{field:'userRenewTime', width:80, title: '更新时间'},{field:'roleId', width:80, title: 'steamID'},{field:'userNickname', width:80, title: 'steam秘钥'},{field:'userTime', title:'注册时间'},{fixed: 'right', title:'操作', width: 134, minWidth: 125, toolbar: '#barDemo'}]],

✏️总结

遇到这样的问题千万不要恼火,如果不知道怎么解决就回了看看半杯可可写的解决方案,好啦就写到这了,诸君如果觉得有什么不对的地方,请指出,望与诸君共同学习,共同进步!


http://chatgpt.dhexx.cn/article/l1wk3k7C.shtml

相关文章

layui数据表格layui.table.render

通过一个简要的例子来介绍一下相关功能。主要我写项目中常用的属性和方法都介绍出来了&#xff0c;如果需要其他功能&#xff0c;可以看看官网。 页面 <table id"demo" lay-filter"demo_table_filter"></table><script> layui.use(tabl…

3. layui的layer的用法

1. 初始化layui组件 加载layui框架的项目包&#xff0c;一定要在文本就绪时间中初始化layui组件&#xff0c;否则可能导致多个组件无法使用。 2. mouse浮动展示信息提示框 &#xff08;layer提供的简洁的信息提示窗口&#xff0c;可以设置信息提醒&#xff0c;其中格式可遵循…

【数据结构与算法】图的深度优先和广度优先遍历

&#x1f60a;&#x1f60a;作者简介&#x1f60a;&#x1f60a; &#xff1a; 大家好&#xff0c;我是南瓜籽&#xff0c;一个在校大二学生&#xff0c;我将会持续分享Java相关知识。 &#x1f389;&#x1f389;个人主页&#x1f389;&#x1f389; &#xff1a; 南瓜籽的主页…

C++深度优先和广度优先的实现

C深度优先和广度优先的实现 前言源码如下&#xff1a;测试结果深度优先&#xff08;栈实现&#xff09;和广度优先&#xff08;队列实现&#xff09;图解 前言 本篇文章为笔者的读书笔记&#xff0c;未经允许请勿转载。如果对你有帮助记得点个赞(●’◡’●) 本文主要讲的深度优…

迷宫问题(maze problem)—— 深度优先与广度优先搜索求解

文章目录 1.问题简介2.求解方法3.深度优先搜索加回溯法3.1 求解第一条可行路径3.2 求解最短路径 4.广度优先搜索小结参考文献 1.问题简介 给定一个迷宫&#xff0c;指明起点和终点&#xff0c;找出从起点出发到终点的有效可行路径&#xff0c;就是迷宫问题&#xff08;maze pr…

图深度优先、广度优先遍历(java)

一、图的遍历 图的遍历&#xff0c;即是对结点的访问。一个图有那么多个结点&#xff0c;如何遍历这些结点,需要特定策略&#xff0c;一般有两种访问策略:(1)深度优先遍历(2)广度优先遍历深度优先遍历基本思想。 二、深度优先遍历 图的深度优先搜索(Depth First Search)。 深…

总结深度优先与广度优先的区别

3 总结深度优先与广度优先的区别 1、区别 1&#xff09; 二叉树的深度优先遍历的非递归的通用做法是采用栈&#xff0c;广度优先遍历的非递归的通用做法是采用队列。 2&#xff09; 深度优先遍历&#xff1a;对每一个可能的分支路径深入到不能再深入为止&#xff0c;而且每个结…

连通图里的深度优先和广度优先遍历

从图中的某个顶点出发&#xff0c;按照某种搜索方法沿着图的边访问图中的所有顶点&#xff0c;使得每个顶点仅被访问一次&#xff0c;这个过程称为图的遍历。图的遍历有两种&#xff1a;深度优先遍历和广度优先遍历。   图分为连通图和非连通图&#xff0c;这里主要讨论连通图…

广度优先算法

广度优先算法 本文主要以介绍算法思想为主这里并没有进行源码实现&#xff0c;但是给出推荐使用的数据结构和主要思想。 首先介绍一下广度优先算法&#xff0c;假设要查找AB两点之间的最短距离&#xff0c;以A为起点B为终点。可以先遍历A的相邻节点&#xff0c;这些节点称之为…

C语言基于邻接表的图的深度优先、广度优先遍历

目录 1 深度优先&#xff08;Depth_First Search&#xff09; 2 广度优先&#xff08;Broadth_First Search&#xff09; 3 基于邻接表的深度优先、广度优先遍历 4 源代码示例 4.1 深度优先 4.2广度优先 假设有无向图G &#xff08;V&#xff0c;E&#xff09;&#xff…

数据结构之深度优先和广度优先遍历

文章目录 图为什么要有图图的常用概念邻接矩阵邻接表图的深度优先遍历深度优先遍历基本思想深度优先遍历算法步骤深度优先算法的代码实现 图的广度优先遍历广度优先遍历基本思想广度优先遍历算法步骤广度优先算法的代码实现图结构完整代码 图 为什么要有图 1)前面我们学了线性…

图的深度优先和广度优先遍历算法

编写一个程序&#xff0c;输出下面带权有向图的邻接表&#xff0c;并根据该邻接表&#xff0c;实现图的遍历运算&#xff0c;具体要求如下&#xff1a; (1)从顶点0开始的深度优先遍历序列(递归算法) (2)从顶点0开始的深度优先遍历序列(非递归算法) (3)从顶点0开始的广度优先遍历…

算法之深度优先、广度优先算法

目录 前言&#xff1a; 搜索算法&#xff1a; 广度优先搜索算法 深度优先搜索算法 问题&#xff1a;如何找出社交网络中某个用户的三度好友关系&#xff1f; 总结&#xff1a; 参考资料&#xff1a; 前言&#xff1a; 图这种数据结构经常用于表示一个社交网络&#x…

广度优先搜索与深度优先搜索

广度优先搜索&#xff08;宽度优先搜索&#xff0c;BFS&#xff09;和深度优先搜索&#xff08;DFS&#xff09;算法的应用非常广泛&#xff0c;本篇文章主要介绍BFS与DFS的原理、实现和应用。 深度优先搜索 图的深度优先搜索(Depth First Search)&#xff0c;和树的先序遍历…

深度优先遍历与广度优先遍历

1、深度优先遍历(Depth First Search, 简称 DFS) 1.1、主要思路 从图中一个未访问的顶点 V 开始&#xff0c;沿着一条路一直走到底&#xff0c;然后从这条路尽头的节点回退到上一个节点&#xff0c;再从另一条路开始走到底…&#xff0c;不断递归重复此过程&#xff0c;直到所…

深度优先与广度优先

深度优先遍历简称DFS&#xff08;Depth First Search&#xff09;&#xff0c;广度优先遍历简称BFS&#xff08;Breadth First Search&#xff09;&#xff0c;它们是遍历图当中所有顶点的两种方式。 深度优先遍历&#xff1a; 选取一个节点开始&#xff0c;沿着一条路一直走…

深度优先遍历(DFS)和广度优先遍历(BFS)

深度优先遍历&#xff08;DFS&#xff09;和广度优先遍历&#xff08;BFS&#xff09; 图的遍历&#xff1a;所谓遍历&#xff0c;即是对结点的访问。一个图有多个结点&#xff0c;如何遍历这些结点&#xff0c;有两种访问策略&#xff1a; 深度优先遍历(Depth First Search, …

深度优先与广度优先的区别!

从深度优先和广度优先两个角度解决同一个问题 题目 从一号顶点开始遍历这个图&#xff0c;使用深度优先搜索和广度优先搜索的2种遍历结果 深度优先遍历的主要思想就是&#xff0c;首先以一个未被访问过的顶点作为起始顶点&#xff0c;沿着当前顶点的边走到未访问过的顶点&…

数据结构:图的遍历--深度优先、广度优先

图的遍历&#xff1a;深度优先、广度优先 遍历 图的遍历是指从图中的某一顶点出发&#xff0c;按照一定的策略访问图中的每一个顶点。当然&#xff0c;每个顶点有且只能被访问一次。 在图的遍历中&#xff0c;深度优先和广度优先是最常使用的两种遍历方式。这两种遍历方式对无…

深度优先搜索与广度优先搜索

算法是作用于具体数据结构之上的&#xff0c;深度优先搜索算法和广度优先搜索算法都是基于“图”这种数据结构的。这是因为&#xff0c;图这种数据结构的表达能力很强&#xff0c;大部分涉及搜索的场景都可以抽象成“图”。 图上的搜索算法&#xff0c;最直接的理解就是&#…