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

news/2025/2/22 5:16:26/

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

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

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

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

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

目录

文章内容如下

✏️前言

✏️一、问题原因

✏️二、解决方案

✏️总结


文章内容如下


✏️前言

 🌼一般出现这个问题是因为后台返回数据与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://www.ppmy.cn/news/689025.html

相关文章

ios根号怎么打_ios计算器开根号 苹果手机计算器怎么开根号 详情介绍

几乎所有的智能手机都自带计算器功能,而苹果手机的计算器甚至可以支持开根号。不太熟悉这项功能小伙伴可能不知道 苹果手机计算器怎么开根号,今天小编教你 ios计算器开根号方法。 工具/材料 苹果手机 ios计算器开根号 苹果手机计算器怎么开根号 01 苹果手…

iOS 网络流量统计

在开发中,有时候需要获取流量统计信息。研究发现:通过函数getifaddrs来得到系统网络接口的信息,网络接口的信息,包含在if_data字段中, 有很多信息, 但我现在只关心ifi_ibytes, ifi_obytes, 应该就是接收到的…

苹果IOS手机端该如何连接PPTP?

PPTP是一种协议,用以修改手机端和电脑端上的协议,且不需要安装额外的软件,就能屏蔽掉本地IP。 它为单地区和混拨。单地区就是指单个地区的IP,混拨指多个地区的IP。 不同的手机打开方式有点不一样,具体以手机为准&…

ios测试基础五: ios手机流量消耗

iOS手机流量消耗 在iphone手机上使用wifi或者数据连接方式,操作某个应用下某个场景,实时监测流量消耗情况: (一般情况下,更多地要关注 数据连接2G或3G或4G 下流量消耗情况) 前提准备: 1. xcode 2. instruments&#xf…

iOS开发监测手机流量使用情况

获取手机使用流量存在几个问题: ①iOS是无法像Android一样监听到开机广播和关机广播的,立刻关机再开机,监测的移动网络下流量会默认清空。 ②应用在后台运行时,突然被杀死,无法对流量统计,需要在应用进入后台时先保存流量使用情…

iOS 流量统计

在网上查了一下关于流量统计的资料&#xff0c;整理了一下Demo地址 #import "FolwBytesTools.h" #include <arpa/inet.h> #include <net/if.h> #include <ifaddrs.h> #include <net/if_dl.h> typedef enum { FolwBytesNumWiFiSent …

AnyConnect苹果IOS系统Iphone手机的设置教程

AnyConnect IOS系统的使用教程: 1、下载客户端软件 打开App Store应用商店搜索“anyconnect”下载并安装 AnyConnect IOS系统使用教程 2、打开软件&#xff0c;点击"Connections"&#xff0c;如图&#xff1a; AnyConnect IOS系统使用教程 3、点击“Add VP N Conn…

iOS 15.5 被曝“偷跑”流量?苹果:建议恢复出厂设置

整理 | 郑丽媛 出品 | CSDN&#xff08;ID&#xff1a;CSDNnews&#xff09; 半个月前&#xff0c;苹果官方推送了 iOS 15.5 正式版的更新。作为历经四个测试版之后的 iOS 15 第五个大版本更新&#xff0c;iOS 15.5 正式版推出了一些新功能&#xff0c;如 Apple Music 支持倍速…