LayUI-使用table数据表格用thymeleaf解析报500错误

最新推荐文章于 2023-09-26 12:36:17 发布
最新推荐文章于 2023-09-26 12:36:17 发布
阅读量1.2k 收藏 2
点赞数 3
分类专栏： 踩过的坑
原文链接：https://blog.csdn.net/rjkkaikai/article/details/80452128
版权

LayUI-使用table数据表格用thymeleaf解析报500错误


在写毕设的时候要使用layui的数据表格，刚开始使用的时候报500错误，表示thymeleaf在解析这个页面的时候解析出错了，是前端的问题。
其实很简单，就是个缩进问题。 

<script>
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#test'
            ,url:'/demo/table/user/'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [[
                    {field:'id', width:80, title: 'ID', sort: true}
                    ,{field:'username', width:80, title: '用户名'}
                    ,{field:'sex', width:80, title: '性别', sort: true}
                    ,{field:'city', width:80, title: '城市'}
                    ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    ,{field:'experience', title: '积分', sort: true}
                    ,{field:'score', title: '评分', sort: true}
                    ,{field:'classify', title: '职业'}
                    ,{field:'wealth', width:137, title: '财富', sort: true}
                ]]
        });
    });
</script>

可以看到有一部分是

col[[
	... ...
]]

只需要改成

col[
	[
		... ...
	]
]

就不会报错了

修改后的代码

<script>
    layui.use('table', function(){
        var table = layui.table;

        table.render({
            elem: '#test'
            ,url:'/demo/table/user/'
            ,cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            ,cols: [
                [
                    {field:'id', width:80, title: 'ID', sort: true}
                    ,{field:'username', width:80, title: '用户名'}
                    ,{field:'sex', width:80, title: '性别', sort: true}
                    ,{field:'city', width:80, title: '城市'}
                    ,{field:'sign', title: '签名', width: '30%', minWidth: 100} //minWidth：局部定义当前单元格的最小宽度，layui 2.2.1 新增
                    ,{field:'experience', title: '积分', sort: true}
                    ,{field:'score', title: '评分', sort: true}
                    ,{field:'classify', title: '职业'}
                    ,{field:'wealth', width:137, title: '财富', sort: true}
                ]
            ]
        });
    });
</script>

因为[[…]]之间的表达式在thymeleaf被认为是内联表达式,所以渲染错误

本文参考：CSDN博主「rjkkaikai」原创文章
原文链接：https://blog.csdn.net/rjkkaikai/article/details/80452128

炒饭IYJ
关注
  • 3
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
layui数据表格 table.render 报错的解决方法
10-16
今天小编就为大家分享一篇layui数据表格 table.render 报错的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
layui在open弹出层回显，解决动态select数据回显问题
weixin_34174105的博客
09-05 2890
//监听数据表格工具条 table.on('tool(contentList)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值" var data = obj.data //获得当前行数据 ,layEvent = obj.event;...
使用layui进行方法渲染列表时渲染不上,返回的数据不符合规范，正确的成功状态码应为：“code“:0，解决办法。
weixin_52231266的博客
05-21 1714
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言使用springboot+layui编写后台管理系统遇到的一些问题，以及如何解决:一、使用layui进行方法渲染列表时渲染不上,返回的数据不符合规范，正确的成功状态码应为："code": 0？总结： 前言 使用springboot+layui编写后台管理系统遇到的一些问题，以及如何解决: 一、使用layui进行方法渲染列表时渲染不上,返回的数据不符合规范，正确的成功状态码应为：“code”: 0？ 页面中列表主要代码 //这.
Layui 列表初始化，数据默认不显示
沉虚苑的博客
08-20 3338
Layui 列表初始化，数据默认不显示 需求：初始加载，表格呈现，数据默认不显示，且不提示数据异常。 1.布局表格控件 <br /> <table class="layui-hide" id="checkList" lay-filter="test"></table> <br /> 2.呈现方法 <script type="text/javascript"> //根据需要，自行添加use模块（如：form、table、upload ...等
LayUI列表渲染实现及问题
hong_339的博客
12-19 1247
今天使用了一下LayUI框架，发现很好用，开发效率很高，但是还是遇到很多坑，主要是之前没有好好看文档，废话不说了，直接贴代码 上面为使用LayUI动态获取数据的实现，但是呢很多同学可能出现数据拉取成功，列表没有数据的问题，包括我也出现这种情况，搞了半天不知道啥原因，最后去官网好好看了一下文档，才发现我返回的状态名称和值和layUI默认的不一样，默认的 statusName:...
LayUi:数据接口请求异常：error
m0_48919915的博客
11-12 2248
如果使用的是MySQL 8.0 版本 应注意db.properties
关于layui upload上传组件上传文件无反应的问题
jerrylearner的博客
09-26 2039
这个文件上传组件上面的，其他文章里面提到的二次上传同样的文件无反应也是跟这里有关，因为这个input给value属性赋值为已选择的文件的路径，当第二次上传同样的文件因为路径相同，就不会处理。其实layui文档里也写了，调用layui.upload.render时，会返回一个实例，我们保存这个实例，下次不要重复去调layui.upload.render就可以了，要调整参数通过实例去调reload方法。照例先百度一番，出来的文章都是说第二次上传同样的文件无反应的问题，这个有相应的解决方法。
layui上传文件php上传接口异常,layui文件上传组件“请求上传接口出现异常”问题解决方案...
weixin_32327615的博客
04-06 838
这是一个悲伤的故事，以前开发项目用过很多次这个组件，这次使用了Token，于是报了一些莫名其妙的错误，来复盘一下，警示自己！刚开始接触layui的同学们肯定经常会看到这个错误下面我们对这个异常的处理方案来总结一下：(1)Controller层的接口返回格式不对这是最常见的错误，我们先看一下官方文档的接口要求这里注意一下最后两段话，可以不按照此格式，但是必须是JSON字符串，绝大多数情况在Contr...
thymeleaf模板引入layui遇到的冲突问题（table 数据表格文档 - layui.table的引入）
weixin_44869421的博客
04-07 829
https://blog.csdn.net/qq_41358372/article/details/103218113
项目实战-SpringBoot+MyBatis+LayUI+Thymeleaf 权限系统
06-21
该项目是一套基于springboot、mybatis、thymeleaf及layui的轻量级快速开发框架、脚手架、后台管理系统、权限系统，上手简单，拿来即用，通用的项目结构为广大开发者去除了大部分的复杂繁琐的代码工作。同时对学习...
理财管理-使用spring boot+thymeleaf
04-25
理财管理-使用spring boot+thymeleaf
thymeleaf-extras-tiles2:Thymeleaf与Apache Tiles 2.x的集成
05-22
Thymeleaf-Tiles 2集成模块 地位 这是一个thymeleaf Extras模块，不是Thymeleaf核心的一部分（因此遵循其自己的版本控制架构），但得到Thymeleaf团队的完全支持。 当前版本： 版本2.1.1.RELEASE-适用于Thymeleaf ...
spring boot框架layui前端，table拓展，支持动态表头和数据展示，支持table表数据编辑
06-13
1.table支持动态加载列头和数据； 2.table支持翻页标签隐藏；修改查询请求2次后台； 3.table支持页面数据遍历与更新；
thymeleaf-spring-data-dialect, 使用thymeleaf和 Spring Data 简化数据分页.zip
09-18
thymeleaf-spring-data-dialect, 使用thymeleaf和 Spring Data 简化数据分页 Thymeleaf Spring Data 方言使用thymeleaf和 spring 数据简化数据分页。这是Thymeleaf的方言，它提供一些属性来创建分页和排序元素，...
基于java的-28-“智慧食堂”设计与实现--LW-源码.zip
04-25
提供的源码资源涵盖了Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 适合毕业设计、课程设计作业。这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。 所有源码均经过严格测试，可以直接运行，可以放心下载使用。有任何使用问题欢迎随时与博主沟通，第一时间进行解答！
C#，回文分割问题（Palindrome Partitioning Problem）算法与源代码
04-25
C#，回文分割问题（Palindrome Partitioning Problem）算法与源代码 1 回文串 “回文串”是一个正读和反读都一样的字符串，初始化标志flag=true，比如“level”或者“noon”等等就是回文串。 2 回文分割问题 给定一个字符串，如果该字符串的每个子字符串都是回文的，那么该字符串的分区就是回文分区。 例如，“aba | b | bbabb | a | b | aba”是“abababababa”的回文分区。 确定给定字符串的回文分区所需的最少切割。 例如，“ababababababa”至少需要3次切割。 这三个分段是“a | babbab | b | ababa”。 如果字符串是回文，则至少需要0个分段。 如果一个长度为n的字符串包含所有不同的字符，则至少需要n-1个分段。
node-v9.2.1.tar.xz
最新发布
04-25
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
贪心算法解决活动选择问题，Java版源码
04-25
贪心算法是一种在每一步选择中都采取在当前状态下最好或最优的选择，从而希望导致结果是全局最好或最优的算法策略。贪心算法在有最优子结构的问题中尤为有效。最优子结构的意思是局部最优解可以决定全局最优解。 附件中一个使用贪心算法解决活动选择问题（也称为会议时间安排问题）的 Java 示例代码。这个问题的目标是选择最大的活动数量，使得活动之间互不重叠。 在示例中，我们定义了一个 Activity 类来表示每个活动的开始和结束时间。然后，我们创建了一个活动数组，并使用 Arrays.sort() 方法按照活动的结束时间对它们进行排序。 接下来，我们遍历排序后的数组，使用贪心算法的策略选择活动。选择的标准是当前活动的开始时间是否晚于或等于之前选择的最后一个活动的结束时间。如果是，我们就选择这个活动，并更新 lastActivityEnd 为当前活动的结束时间。最后，我们打印出可以执行的最大活动数量。
thymeleaf使用layui实现登录
05-25
以下是一个简单的Thymeleaf和Layui实现登录页面的示例： 1. 引入Layui相关的CSS和JS文件 在HTML文件中引入Layui的CSS和JS文件，可以从Layui官网下载并放置在项目的静态资源目录下。示例代码如下： ``` <!DOCTYPE html> <html xmlns:th="http://www.thymeleaf.org"> <head> <meta charset="UTF-8"> <title>登录页面</title> <link rel="stylesheet" href="/static/layui/css/layui.css"/> <script src="/static/layui/layui.js"></script> </head> <body> <!-- 页面内容 --> </body> </html> ``` 2. 编写登录表单 在页面中使用Layui的表单组件编写登录表单，示例代码如下： ``` <!-- 登录表单 --> <form class="layui-form" method="post" th:action="@{/login}"> <div class="layui-form-item"> <label class="layui-form-label">用户名</label> <div class="layui-input-block"> <input type="text" name="username" required lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">密码</label> <div class="layui-input-block"> <input type="password" name="password" required lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" lay-submit lay-filter="login">登录</button> </div> </div> </form> ``` 在表单中使用Thymeleaf的表达式`th:action="@{/login}"`指定表单提交的URL，这里假设登录请求的URL为`/login`。 3. 编写登录处理器 在后端编写登录处理器，接收并处理登录请求。在处理器中可以使用Spring Security等安全框架进行身份认证和授权，这里只演示简单的处理器示例代码： ``` @Controller public class LoginController { @GetMapping("/login") public String login() { return "login"; } @PostMapping("/login") public String doLogin(@RequestParam("username") String username, @RequestParam("password") String password) { // 处理登录逻辑 return "redirect:/index"; } @GetMapping("/index") public String index() { return "index"; } } ``` 在`login()`方法中返回登录页面的视图名称，这里假设登录页面的视图名称为`login`。在`doLogin()`方法中处理登录请求，这里只是简单地接收并验证用户名和密码，然后重定向到首页。 4. 启用Layui表单验证 为了启用Layui表单验证功能，在页面底部添加以下代码： ``` <script> layui.use('form', function(){ var form = layui.form; form.verify({ username: function(value){ if(value.length < 5){ return '用户名长度不能小于5位'; } }, password: function(value){ if(value.length < 6){ return '密码长度不能小于6位'; } } }); form.on('submit(login)', function(data){ // 提交表单 return true; }); }); </script> ``` 在以上代码中，`layui.use('form', function(){...})`是Layui表单组件的初始化代码，`form.verify({...})`用于添加表单验证规则，`form.on('submit(login)', function(data){...})`用于提交表单。这里定义了两个表单验证规则：用户名长度不能小于5位，密码长度不能小于6位。 5. 运行程序 启动程序，访问登录页面，输入用户名和密码，点击登录按钮，即可提交登录表单并跳转到首页。如果输入的用户名和密码不符合验证规则，则会提示错误信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值