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

 更新时间:2019年09月29日 08:39:39   作者:萧道子  
今天小编就为大家分享一篇layui数据表格 table.render 报错的解决方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

一、报错信息

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)

二、问题处理

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

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

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

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

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

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

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

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 报错的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • pc加载更多功能和移动端下拉刷新加载数据

    pc加载更多功能和移动端下拉刷新加载数据

    这篇文章主要为大家详细介绍了pc加载更多功能和移动端下拉刷新加载数据,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-11-11
  • JavaScript实现枚举的几种方法总结

    JavaScript实现枚举的几种方法总结

    在前端开发中,我们可能经常需要用到枚举,使用枚举的好处是为了让代码的可读性更强,避免直接使用数字或未知的字符串,但是在JavaScript中,要自己实现一个枚举功能,那么大家能想到多少种实现枚举的方法呢,我将介绍几种实现枚举的好方法
    2023-08-08
  • JavaScript实现日期格式化详细实例

    JavaScript实现日期格式化详细实例

    这篇文章主要给大家介绍了关于JavaScript实现日期格式化的相关资料,JavaScript中的日期对象提供了许多方法和属性,可以通过它们来进行日期的格式化,需要的朋友可以参考下
    2023-09-09
  • JavaScript中的纯函数与偏函数你了解吗

    JavaScript中的纯函数与偏函数你了解吗

    JS中,纯函数指在相同的输入下始终产生相同的输出并且没有副作用的函数,偏函数指一种创建新函数的方法,通过预设一个或多个参数从而实现对原始函数的封装和定制,本文主要来讲讲纯函数与偏函数的一些使用,需要的可以参考一下
    2023-05-05
  • js 将线性数据转为树形的示例代码

    js 将线性数据转为树形的示例代码

    这篇文章主要介绍了js 将线性数据转为树形的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • JavaScript对Cookie进行读写操作实例

    JavaScript对Cookie进行读写操作实例

    这篇文章主要介绍了JavaScript对Cookie进行读写操作的方法,实例分析了javascript针对cookie的读写操作技巧,非常简单实用,需要的朋友可以参考下
    2015-07-07
  • 现代 javscript 编程 资料

    现代 javscript 编程 资料

    现代 javscript 编程 资料...
    2007-04-04
  • 纯JS实现出生日期[年月日]下拉菜单效果

    纯JS实现出生日期[年月日]下拉菜单效果

    这篇文章主要介绍了基于纯JS实现出生日期[年月日]下拉菜单效果,本文通过实例代码给大家介绍的非常详细,需要的朋友参考下吧
    2018-06-06
  • document.forms[].submit()使用介绍

    document.forms[].submit()使用介绍

    这篇文章主要介绍了document.forms[].submit()使用,需要的朋友可以参考下
    2014-02-02
  • 详解Typescript 内置的模块导入兼容方式

    详解Typescript 内置的模块导入兼容方式

    这篇文章主要介绍了详解Typescript 内置的模块导入兼容方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-05-05

最新评论