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 相关文章推荐
尽可能写"友好"的"Javascript"代码
Jan 09 Javascript
jQuery中文入门指南,翻译加实例,jQuery的起点教程
Feb 09 Javascript
jquery CSS选择器笔记
Mar 29 Javascript
25个优雅的jQuery Tooltip插件推荐
May 25 Javascript
JavaScript Memoization 让函数也有记忆功能
Oct 27 Javascript
详解JavaScript语言的基本语法要求
Nov 20 Javascript
js处理层级数据结构的方法小结
Jan 17 Javascript
使用mint-ui开发项目的一些心得(分享)
Sep 07 Javascript
JS鼠标3次点击事件实现代码及扩展思路
Sep 12 Javascript
使用socket.io制做简易WEB聊天室
Jan 02 Javascript
vue 表单验证按钮事件交由父组件触发的方法
Dec 17 Javascript
详解js 创建对象的几种方法
Mar 08 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
德生PL450的电路分析和低放电路的改进办法
2021/03/02 无线电
php&java(一)
2006/10/09 PHP
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
openPNE常用方法分享
2011/11/29 PHP
Laravel框架实现简单的学生信息管理平台案例
2019/05/07 PHP
使用composer安装使用thinkphp6.0框架问题【视频教程】
2019/10/01 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
一款JavaScript压缩工具:X2JSCompactor
2007/06/13 Javascript
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
js实现特定位取反原理及示例
2014/06/30 Javascript
详解JavaScript ES6中的Generator
2015/07/28 Javascript
Jquery实现瀑布流布局(备有详细注释)
2015/07/31 Javascript
vuex实现简易计数器
2016/10/27 Javascript
JavaScript 中调用 Kotlin 方法实例详解
2017/06/09 Javascript
Vue 组件间的样式冲突污染
2017/08/31 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
浅谈JS中this在各个场景下的指向
2019/08/14 Javascript
深入理解redux之compose的具体应用
2020/01/12 Javascript
原生js拖拽实现图形伸缩效果
2020/02/10 Javascript
微信小程序抽奖组件的使用步骤
2021/01/11 Javascript
python 正则式使用心得
2009/05/07 Python
Python中利用sorted()函数排序的简单教程
2015/04/27 Python
python tools实现视频的每一帧提取并保存
2020/03/20 Python
对pyqt5中QTabWidget的相关操作详解
2019/06/21 Python
python 实现手机自动拨打电话的方法(通话压力测试)
2019/08/08 Python
关于tf.TFRecordReader()函数的用法解析
2020/02/17 Python
使用python实现下载我们想听的歌曲,速度超快
2020/07/09 Python
5个你不知道的HTML5的接口介绍
2013/08/07 HTML / CSS
英国巧克力贸易公司:Chocolate Trading Company
2017/03/21 全球购物
瑞典手机壳品牌:Richmond & Finch
2018/04/28 全球购物
会议活动邀请函
2014/01/27 职场文书
群众路线批评与自我批评
2014/02/06 职场文书
群众路线教育实践活动心得体会
2014/03/07 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
python开发的自动化运维工具ansible详解
2021/08/07 Python
mysql自增长id用完了该怎么办
2022/02/12 MySQL