SpringBoot + Layui 使用Datatable 的踩坑 (一)

已于 2022-07-08 23:48:59 修改
阅读量662 收藏
点赞数
分类专栏： Layui SpringBoot+Layui的踩坑集锦(持续更新中) java 文章标签： layui 前端 javascript
于 2020-11-15 19:08:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35332494/article/details/109472610
版权

本人最新博客地址blog

问题描述：

具体情况是这样的:
使用dataTable插件显示数据,然后在插件中指定ajax的数据源之类
在这里插入图片描述

在这里插入图片描述
然后就一直找原因

原因分析：

最后问题的根源是在于sucess:function函数,因为好像是加了这个函数,dataTable会默认认为你会有自定义的数据填充,然后就下面的Column不生效了,所以只需要把sucess删除掉即可

然后表格就可正常显示了!!!

耳东不洗碗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Layui_数据表格简单介绍
隔壁的博客
09-27 612
前言： 数据表格的详细内容，大家请阅读官方文档，这里主要是简单介绍一下使用。之后会有一个简易的 网上书城项目介绍会使用到这些。 目录 一、效果展示 二、前端实现 dataTable.jsp dataTable.js 三、后端实现 1、项目结构： 2、Dao层 BookDao.java 3、Web层 BookAction.java 3、XML文件配置 四、总结 一、效果展示 二、前端实现 dataTable.jsp <%@ page language="jav
springboot+layui实现数据表格.zip
10-24
springboot+layui实现数据表格功能，提供增删改查模糊搜索功能，含有项目解析以及sql文件，具有echart图表功能，是一个功能齐全的后台管理系统模板。
layui datatable edit select
k195514239的博客
03-08 890
<style type="text/css"> /* 防止下拉框的下拉列表被隐藏---必须设置--- */ .layui-table-cell { overflow: visible !important; } /* 使得下拉框与单元格刚好合适 */ td .layui-form-select { margin-top: -10px; margin-left: -15px; margin-ri...
LayUI 数据表增加数据行Demo （Html）
01-12
LAYUI数据表增加数据行示例，Html LAYUI数据表增加数据行示例，Html LAYUI数据表增加数据行示例，Html LAYUI数据表增加数据行示例，Html
关于spring boot 整合layUI框架表格数据不显示情况
renjingkai的博客
05-25 4359
检查你后台返回的数据格式，layUI要求格式： {"msg":"","code":0,"data":[{"password":"123456","phone":"123456","userName":"呵呵","userId":1},{"password":"
springboot+mongodb+hui
05-18
springboot+mongodb，封装了mongodb通用的dao层，里面实现了增删改查分页查询基础功能，前端采用的是hui，分页采用jquery.datatable.js，做了数据封装工具类。安全这一块用的是spring security。但是做的功能不多，...
基于bootstrap + php +ajax datatable 插件的使用-附件资源
03-02
基于bootstrap + php +ajax datatable 插件的使用-附件资源
maven springBoot mybatisPlus H-ui Admin dataTable
09-12
标题中的“maven springBoot mybatisPlus H-ui Admin dataTable”提到了四个关键技术和工具，分别是Maven、Spring Boot、MyBatis Plus以及H-ui Admin和dataTable。这些技术在IT行业中有着广泛的应用，尤其是在构建...
C#使用Datatable导出Excel
08-26
下面是一个使用C#语言将Datatable数据导出到Excel文件中的示例代码： ```csharp public static MemoryStream WriteExcel(DataTable dt, List<ChartTitle> objlist, string filePath) { var list = objlist....
Asp.net中获取DataTable选择第一行某一列值
10-20
主要介绍了获取DataTable选择第一行某一列值,需要的朋友可以参考下
layui之数据表格--与后台交互获取数据的方法
10-16
今天小编就为大家分享一篇layui之数据表格--与后台交互获取数据的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
【前端】Layui动态数据表格拖动排序
最新发布
qq_25285531的博客
09-01 5475
目的：使用Layui的数据表格，拖动行进行排序。使用插件：layui-soul-table 和 Layui结合Layui并参看官方教程，写的比较详细页比较简单。实现效果：可以拖动行进行排序，可以搜索。
datatable转layui表格v2[分页and带模板]【偏实例】
极客神殿
09-23 194
本项目由普通mvc+webapi接口构成。
Layui table使用data绑定数据
jduksa的博客
06-22 5562
var data=[ { "Id":"", "CompanyId":"", "Grade":"", "TPType":"", "UserName":"", "CreateTime":"", "Fantion":"" }, { "Id":"", "CompanyId":"", "Grade":"", "TPTyp
jquery datatable layui 表格宽度
weixin_33806509的博客
12-30 519
2019独角兽企业重金招聘Python工程师标准>>> ...
datatables 初始全量加载数据
CherishL_的专栏
05-26 3659
使用的layui前端框架//一次性全量加载 function initDataTable(){ $("#table_id").html(""); $(".spinner").show(); var d = ajax.ajaxFunc(ctx+"/index/qidian/getDataList",null,"json",null); $('#table_id').Dat
layui 数据表格的前后端交互
热门推荐
执笔写流年
04-10 2万+
layui的使用点击打开链接前端jsp的页面&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;% String path = request.getContextPath(); String basePath = request.getSc...
一个完整的jQuery datatable示例
Nightliar的博客
02-03 1万+
html代码  首页 > u3d管理 >模型管理  日期范围：  搜产品  清空 序号 商品ID 模型ID 商品名称 商品列表图 模型预览图 上传时间 修改时间 操作
Layui - 数据表格 table
weixin_42361858的博客
12-03 3830
官网文档：https://www.layui.com/doc/modules/table.html 模块： layui.use('table', function(){ var table = layui.table; }); 目录 简单表格 参数 开放方法 方法 - 事件监听 简单表格 <!-- 注意class、layui参数、方法 --> <!-- 方法渲染 --> <table class="layui-table" id="simple"&gt.
springboot+layui如何实现表格分页
08-02
### 回答1： 实现 springboot 和 layui 表格分页的步骤如下： 1. 前端页面：在使用 layui 表格的页面引入 layui.js 和 layui.css 文件。 2. 后端代码：使用 springboot 构建后端服务，通过 HTTP 请求向前端发送数据。 3. 分页参数：在前端页面，使用 layui table 控件定义分页参数，例如：每页显示数量、当前页码等。 4. 分页请求：使用 layui table 控件发送请求到后端，后端通过分页参数从数据库中查询相应的数据并返回给前端。 5. 表格渲染：前端接收到后端返回的数据，使用 layui table 控件将数据渲染到表格中，实现表格分页功能。 6. 翻页事件：使用 layui table 控件监听翻页事件，在事件触发时重新发送请求到后端，实现下一页或上一页的数据加载。 希望以上步骤能帮助您实现 springboot 和 layui 表格分页。 ### 回答2： 在SpringBoot和Layui实现表格分页的过程中，可以通过以下步骤实现： 1. 在后端代码中，首先引入Layui的DataTable插件，使用Layui提供的数据表格组件实现分页效果。 2. 在后端代码中，通过SpringBoot的控制器(Controller)接收前端传递的分页参数，例如当前页码(page)和每页显示数量(limit)。 3. 在后端代码中，根据接收到的分页参数，利用数据库查询语句查询数据表中的数据，并根据传递的分页参数进行分页操作。 4. 将查询到的分页数据返回给前端。 5. 在前端代码中，使用Layui的table模块生成表格，并设置分页参数。 6. 通过JavaScript在前端代码中调用Layui的table模块提供的分页方法，根据后端返回的分页数据动态生成分页组件。 7. 在前端代码中，利用JavaScript将查询到的数据填充到表格的相应位置。 总结来说，SpringBoot和Layui实现表格分页的核心是后端对分页参数的接收和数据的分页操作，以及前端对后端返回的分页数据的处理和分页组件的生成。通过这样的操作，可以实现便捷的表格分页功能。 ### 回答3： 在Spring Boot和Layui结合使用时，实现表格分页可以通过以下步骤来实现： 1. 在后端使用Spring Boot开发接口，查询数据库获取分页数据。可以使用Spring Data JPA或MyBatis等持久层框架进行数据库操作。 2. 定义一个Java类来表示表格数据的结果集，包含总记录数和当前页数据列表。 3. 在后端接口中，根据前端传递的页码和每页显示的记录数，通过查询条件进行筛选，并使用分页查询语句获取对应页码的数据。 4. 将查询结果封装到步骤2中定义的实体类中，并返回给前端。 5. 在前端的HTML页面中引入Layui框架的相关CSS和JS文件。 6. 在HTML页面中使用Layui提供的表格组件，结合异步加载数据的方式进行数据展示和分页操作。 7. 在Layui的表格组件中，配置分页参数，包括每页显示的记录数、总记录数以及分页样式等。 8. 在Layui的表格组件的回调事件中，监听分页操作，并通过Ajax请求后端接口获取指定页的数据，并将返回的数据展示到表格中。 通过以上步骤，可以实现Spring Boot和Layui结合使用的表格分页功能。需要注意的是，在后端接口中，除了分页查询外，还需要进行条件查询、排序等操作，以满足不同的业务需求。同时，前端页面中还可以添加筛选条件、搜索功能等，以提高用户体验。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值