layui数据表格 table.render 报错的解决方法


Posted in Javascript onSeptember 29, 2019

一、报错信息

Whitelabel Error Page
This application has no explicit mapping for /error, so you are seeing this as a fallback.

Wed Jan 23 15:20:18 CST 2019
There was an unexpected error (type=Internal Server Error, status=500).
An error happened during template parsing (template: "class path resource [templates/Page/test/test.html]")
org.thymeleaf.exceptions.TemplateInputException: An error happened during template parsing (template: "class path resource [templates/Page/test/test.html]")
	at org.thymeleaf.templateparser.markup.AbstractMarkupTemplateParser.parse(AbstractMarkupTemplateParser.java:241)
	at org.thymeleaf.templateparser.markup.AbstractMarkupTemplateParser.parseStandalone(AbstractMarkupTemplateParser.java:100)
org.springframework.web.filter.HiddenHttpMethodFilter.doFilterInternal(HiddenHttpMethodFilter.java:93)
	at org.springframework.web.filter.OncePerRequestFilter.doFilter(OncePerRequestFilter.java:107)
	at org.apache.catalina.core.ApplicationFilterChain.internalDoFilter(ApplicationFilterChain.java:193)
	at org.apache.tomcat.util.threads.TaskThread$WrappingRunnable.run(TaskThread.java:61)
	at java.lang.Thread.run(Thread.java:748)
Caused by: org.attoparser.ParseException: Could not parse as expression: "
     {field: 'code', width: 80, title: 'ID', sort: true},
     {field: 'name', width: 100, title: '用户名'},
     {field: 'age', width: 80, title: '年龄'},
     {field: 'gender', width: 80, title: '性别'},
     {field: 'create_time', width: 80, title: '创建时间'},
     {field: 'update_time', width: 80, title: '修改时间'},

    " (template: "Page/test/test" - line 57, col 25)
	at org.attoparser.MarkupParser.parseDocument(MarkupParser.java:393)
	at org.attoparser.MarkupParser.parse(MarkupParser.java:257)
	at org.thymeleaf.templateparser.markup.AbstractMarkupTemplateParser.parse(AbstractMarkupTemplateParser.java:230)
	... 64 more
Caused by: org.thymeleaf.exceptions.TemplateProcessingException: Could not parse as expression: "
     {field: 'code', width: 80, title: 'ID', sort: true},
     {field: 'name', width: 100, title: '用户名'},
     {field: 'age', width: 80, title: '年龄'},
     {field: 'gender', width: 80, title: '性别'},
     {field: 'create_time', width: 80, title: '创建时间'},
     {field: 'update_time', width: 80, title: '修改时间'},

    " (template: "Page/test/test" - line 57, col 25)
	at org.thymeleaf.standard.expression.StandardExpressionParser.parseExpression(StandardExpressionParser.java:131)

二、问题处理

layui数据表格 table.render 报错的解决方法

根据官网给出的代码,我们会发现 cols: 属性后面的参数“[[ ]] ” ,前后两个中括号是连在一起的。使用的时候必须把它们分开,不然就会报错,最好的选择就是换行,比如像下面这样

layui数据表格 table.render 报错的解决方法

到这里我们发现,像这一类的错误相对于layui这样商业化的框架来说也算是属于比较”低级“的了。但为什么官方迟迟还不修复这个BUG呢,原因很简单 因为它和 thymeleaf 冲突。

当你的项目采用的是 thymeleaf模板引擎 作为前端数据铺显的时候,你会发现想要在js 中获取后端传入的参数 必须以这样的方式取值

layui数据表格 table.render 报错的解决方法

key必须放在 [[ … ]] 中否则无法获取值,这种语法的语句称为“内联”。而这个时候layui 网格加载数据的属性 cols: [[ … ]] 恰好用的也是[[…],所以thymeleaf会把它当做后端的传入的参数来进行解析,自然就报错了。

layui数据表格 table.render 报错的解决方法

解决办法非常简单,在 script 标签中加入属性 th:inline=“none”,指定该标签内的js 不使用”内联“获取参数。

layui数据表格 table.render 报错的解决方法

如果你需要在js 中获取后端传入的参数,把th:inline="none"改成th:inline="javascript"就可以获取了

layui数据表格 table.render 报错的解决方法

如果这个时候页面不报错,却没有数据。可能是返回的数据格式不正确,必须严格按照官方给出的数据格式来封装

1、table 组件默认规定的数据格式为:

{
"code": 0,
"msg": "",
"count": 1000,
"data": [{}, {}]
}

参考数据

{
"code": 0,
"msg": "",
"count": 1000,
"data": [
{
"id": 10000,
"username": "user-0",
"sex": "女",
"city": "城市-0",
"sign": "签名-0",
"experience": 255,
"logins": 24,
"wealth": 82830700,
"classify": "作家",
"score": 57
}
]
}

2、自定义返回数据格式,想重新规定返回的数据格式,那么可以借助 response 参数,如:

table.render({
elem: '#demp'
,url: ''
,response: {
statusName: 'status' //规定数据状态的字段名称,默认:code
,statusCode: 200 //规定成功的状态码,默认:0
,msgName: 'hint' //规定状态信息的字段名称,默认:msg
,countName: 'total' //规定数据总数的字段名称,默认:count
,dataName: 'rows' //规定数据列表的字段名称,默认:data
} 
//,…… //其他参数
});

那么上面所规定的格式为:

{
"status": 200,
"hint": "",
"total": 1000,
"rows": []
}

以上这篇layui数据表格 table.render 报错的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery的$(document).ready()和onload的加载顺序
May 26 Javascript
JavaScript中的Array对象使用说明
Jan 17 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
微信小程序使用第三方库Immutable.js实例详解
Sep 27 Javascript
总结Javascript中数组各种去重的方法
Oct 04 Javascript
微信小程序 实例开发总结
Apr 26 Javascript
jQuery实现标签子元素的添加和赋值方法
Feb 24 jQuery
vue cli 3.0 搭建项目的图文教程
May 17 Javascript
微信小程序云开发实现数据添加、查询和分页
May 17 Javascript
layui多图上传实现删除功能的例子
Sep 23 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 Javascript
微信小程序scroll-view不能左右滑动问题的解决方法
Jul 09 Javascript
JavaScript实现秒杀时钟倒计时
Sep 29 #Javascript
在layui中对table中的数据进行判断(0、1)转换为提示信息的方法
Sep 28 #Javascript
layui+jquery支持IE8的表格分页方法
Sep 28 #jQuery
JavaScript获取页面元素的常用方法详解
Sep 28 #Javascript
解决Layui数据表格的宽高问题
Sep 28 #Javascript
解决layui-table单元格设置为百分比在ie8下不能自适应的问题
Sep 28 #Javascript
layui table 列宽百分比显示的实现方法
Sep 28 #Javascript
You might like
收音机的保养
2021/03/01 无线电
理解php原理的opcodes(操作码)
2010/10/26 PHP
Laravel实现用户注册和登录
2015/01/23 PHP
php实现上传图片文件代码
2015/07/19 PHP
php短信接口代码
2016/05/13 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
ThinkPHP5.1的权限控制怎么写?分享一个AUTH权限控制
2021/03/09 PHP
用roll.js实现的图片自动滚动+鼠标触动的特效
2007/03/18 Javascript
JQuery.Ajax之错误调试帮助信息介绍
2013/07/04 Javascript
JS中window.open全屏命令解析及使用示例
2013/12/11 Javascript
jquery中ajax使用error调试错误的方法
2015/02/08 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
AngularJs 60分钟入门基础教程
2016/04/03 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
jquery轮播的实现方式 附完整实例
2016/07/28 Javascript
jQuery属性选择器用法示例
2016/09/09 Javascript
JS两种类型的表单提交方法实例分析
2016/11/28 Javascript
Bootstrap栅格系统的使用和理解2
2016/12/14 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
Node.js 8 中的 util.promisify的详解
2017/06/12 Javascript
Node.js 8 中的重要新特性
2017/06/28 Javascript
基于JavaScript实现数码时钟效果
2020/03/30 Javascript
vue-awesome-swiper滑块插件使用方法详解
2017/11/27 Javascript
详解vue中localStorage的使用方法
2018/11/22 Javascript
vue2.0实现列表数据增加和删除
2020/06/17 Javascript
vue自定义指令和动态路由实现权限控制
2020/08/28 Javascript
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
Python 的 __str__ 和 __repr__ 方法对比
2020/09/02 Python
印度最好的在线药品订购网站:PharmEasy
2018/11/30 全球购物
Lulu Guinness露露·吉尼斯官网:红唇包
2019/02/03 全球购物
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
祖国在我心中演讲稿300字
2014/05/04 职场文书
2015年施工员工作总结范文
2015/04/20 职场文书
硕士学位申请报告
2015/05/15 职场文书
在HTML中引入CSS的几种方式介绍
2021/12/06 HTML / CSS
Elasticsearch 索引操作和增删改查
2022/04/19 Python