layui table和thymeleaf组合导致页面无法展示问题
在layui table 使用如下
<table class="layui-table" id="subTable" lay-filter="test">
</table>
<script src="/layui/layui.js"></script>
<script >
layui.use(['form','layer','table'], function(){
var table = layui.table
,form = layui.form,$=layui.$;
table.render({
elem: '#subTable' //绑定table id
,url:'/user/table/subject' //数据请求路径
,cellMinWidth: 80
,cols: [[
{field:'subject_no', title:'主键值'}
,{field:'subject_code', title:'编号',width:150}
,{field:'subject_nam', title: '名称'}
,{field:'user_type', title: '用户类型'}
,{field:'seq_num', title:'排序'}
,{fixed: 'right',title: '操作', width:180, align:'center'}//一个工具栏 具体请查看layui官网
]]
,page: true //开启分页
,limit:10 //默认十条数据一页
,limits:[10,20,30,50] //数据分页条
,id: 'testReload'
});
});
</script>
从后台获取数据内容如下:
{
"msg": "",
"code": 0,
"data": [
{
"subject_code": "question",
"user_type": "customer",
"subject_nam": "Quest",
"subject_no": "1",
"seq_num": "1"
},
{
"subject_code": "share",
"user_type": "customer",
"subject_nam": "Share",
"subject_no": "2",
"seq_num": "2"
},
{
"subject_code": "notice",
"user_type": "admin",
"subject_nam": "Notice",
"subject_no": "3",
"seq_num": "5"
},
{
"subject_code": "suggest",
"user_type": "customer",
"subject_nam": "Suggest",
"subject_no": "4",
"seq_num": "4"
},
{
"subject_code": "discuss",
"user_type": "customer",
"subject_nam": "Discuss",
"subject_no": "5",
"seq_num": "3"
}
],
"count": 5
}
但是运行后报错,报错如下:
org.thymeleaf.exceptions.TemplateProcessingException: Could not parse as expression: "
{field:'subject_no', title:'主键值'}
,{field:'subject_code', title:'编号',width:150}
,{field:'subject_nam', title: '名称'}
,{field:'user_type', title: '用户类型'}
,{field:'seq_num', title:'排序'}
,{fixed: 'right',title: '操作', width:180, align:'center'}//一个工具栏 具体请查看layui官网
" (template: "/user/model" - line 164, col 22)
这是因为cols: [[]],从代码中可以看到是[,如果改成一个,则layui的table则无法正常使用,这里需要在script标签中加入 th:inline=“none”
<script th:inline="none">
layui.use(['form','layer','table'], function(){
var table = layui.table
,form = layui.form,$=layui.$;
table.render({
elem: '#subTable' //绑定table id
,url:'/user/table/subject' //数据请求路径
,cellMinWidth: 80
,cols: [[
{field:'subject_no', title:'主键值'}
,{field:'subject_code', title:'编号',width:150}
,{field:'subject_nam', title: '名称'}
,{field:'user_type', title: '用户类型'}
,{field:'seq_num', title:'排序'}
,{fixed: 'right',title: '操作', width:180, align:'center'}//一个工具栏 具体请查看layui官网
]]
,page: true //开启分页
,limit:10 //默认十条数据一页
,limits:[10,20,30,50] //数据分页条
,id: 'testReload'
});
});
加入后即可正常显示表格