关于layui的表格数据(前端HTML+后端SSM)—

运行效果

页面增删改查登录搜索均已实现，后续会慢慢编写相应博客

前端html

<table class="layui-hide" id="test" lay-filter="test"></table>

前端js

<script src="../layui/layui.js" charset="utf-8"></script>

前端layui

layui.use('table', function(){var table = layui.table;$=layui.jquery;//方法级渲染table.render({elem: '#test'   //指的是table标签的id,url: '/teacher/userlist' //后端接收的请求路径,toolbar: '#toolbarDemo' //绑定的工具栏属性，如果你需要表格的增删改查，需要这个绑定下,totalRow: false //是否在表格最下边显示合计行属性,title: '用户数据表',cols: [[  //里面写具体的表格显示的内容{checkbox: true, fixed: true}  //复选框,{field:'sid', title: '学号', sort: true, fixed: true, unresize: true},{field:'sname', title: '姓名'},{field:'sex', title: '性别'},{field:'school', title: '学院'},{field:'sclass', title: '班级', sort: true},{field:'scorecname', title: '课程'},{field:'scoreu', title: '平时成绩', sort: true},{field:'scoref', title: '末考成绩', sort: true},{field:'scoregrade', title: '最终成绩', sort: true},{field:'sphone', title:'联系电话'},{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}//表格的操作列，可以在里面添加查看，删除，编辑按钮]],id: 'testReload',page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档layout: ['limit', 'count', 'prev', 'page', 'next', 'skip'] //自定义分页布局//,curr: 5 //设定初始在第 5 页,groups: 1 //只显示 1 个连续页码,first: false //不显示首页,last: false //不显示尾页},limit:10  //分页属性，表格每页为10条数据});

关于表格的cols属性，里面的格式意思：

field：后端返回的json数据的键，用来获取对应的值显示在表格中
title：表头，表格里显示的属性
sort：表示这一列是否要添加排序属性（可以加到可以排序的属性里，比如：id，成绩，价格）
width：某一列的宽度
totalRowText：设置合计行的名字
totalRow：是否在该列显示合计的数值（比如加到价格的这一列，会在最下边显示总价格）

目前我用到了这些属性，还有一些其他的，如果有需要可以自行了解下

后端SSM

处理器类：TeacherController.java

@RestController
@RequestMapping("/teacher")
public class TeacherController {
@Autowired
private TeacherDateService dateService;private TableData tableData;PageInfo<TeacherStudentDate> pageInfo;@RequestMapping("/userlist")
public TableData TeacherGetStudentTable(int page, int limit, String key){pageInfo=new PageInfo<TeacherStudentDate>();//if语句是为了解决layui的搜索框的后台代码if(key==null||key==""){//如果key为空，则查所有pageInfo = dateService.TeacherGetStudentList(page,limit); //}else {//不为空，则进行搜索pageInfo = dateService.TeacherSearchStudent(key,page,limit);}tableData = new TableData();tableData.setCode(0);//tableData.setMsg("成功");//执行成功返回“成功”tableData.setCount(pageInfo.getTotal());//设置总条数tableData.setData(pageInfo.getList());//设置当前数据return tableData;
}
}

处理器类利用了pagehelper分页，可以利用浏览器传的page和limit进行分页，依赖如下

<dependency><groupId>com.github.pagehelper</groupId><artifactId>pagehelper</artifactId><version>5.1.11</version></dependency>

实体类：TableDate.java（用来接收浏览器发出的请求格式）

public class TableData {
private int code;
private String msg;
private long count;private Object data;public int getCode() {return code;
}public void setCode(int code) {this.code = code;
}public String getMsg() {return msg;
}public void setMsg(String msg) {this.msg = msg;
}public long getCount() {return count;
}public void setCount(long count) {this.count = count;
}public Object getData() {return data;
}public void setData(Object data) {this.data = data;
}
}

写了后发现自己对代码真的了解不够多，如果有问题的话可以评论，我看到的话会回复的，因为也是第一次写，有很多的不足之处，或者上边解释错误的话，还望各位批评指正

关于layui的表格数据(前端HTML+后端SSM)——显示数据相关推荐

前端与后端之间的数据传递
前端与后端之间的数据传递前端页面页面结构 index.html 代码后台服务新建[Dynamic Web Project] 项目结构 Servlet文件解决跨域问题效果展示 JSONObj ...
html表格中绑定显示xml文档内容的简单实例,JS读取XML文件数据并以table形式显示数据的方法(兼容IE与火狐)...
本文实例讲述了JS读取XML文件数据并以table形式显示数据的方法.分享给大家供大家参考,具体如下: 先看xml文件: 张秋丽女 18 李文才男 31 李斯文男 22 马英女 25 孙红雷 ...
后端处理数据保存请求流程multer+ajax 数据库添加数据前端与后端的数据联通在business_list 页面进行数据处理 @stage3---week3--day4
后端处理基础流程 $ npx be_app -e 快速构建项目骨架 $ yarn 安装依赖包修改 package.json {"name": "be-app" ...
前端和后端怎么进行数据交互的_前端VS后端
前言对于广义上的前端来说,上游是接口, 下游是界面. 对于后端来说,上游是数据库, 下游是接口. 前端的工作的核心是交互,消费接口的数据,给到用户.我们分别来看这几个方面:前端能够抵达的最上游是接口 ...
前端和后端的JSON数据交互
因为之前一直在学后端方面的内容,对于前端这块的知识一直半懂半不懂.昨天学了ajax,一些知识点记录下. 前端知识最重要的两种请求方式:GET.POST. GET : 有请求参数,无请求体 POST ...
Excel数据可视化——使用图标集显示数据的意义
使用图标集显示数据的意义链接:https://pan.baidu.com/s/1sC1HtC6YSudxe-nwb25q0g 提取码:7jgp 选中数据选择开始菜单栏中的条件格式,接下来选择图标集 ...
Excel在数据表中悬停鼠标显示数据值
打开一个实例文档,鼠标移动到数据表中,在柱状图上中悬停鼠标,可以看到没有显示数据的值. 鼠标单击左上角的<文件>按钮. 然后单击<选项>按钮. 在弹出的excel选项对话框中单 ...
java删除数组的数据_java数组实现数据处理——显示数据追加插入修改数据删除数据...
java数组实现数据处理--显示数据追加插入修改数据删除数据 (2013-08-10 23:26:05) 标签: 手机博客杂谈数组处理2013年3月5日 20:03:14 import java. ...
FineUI中用JS在前端与后端中传数据
(如果哪位大神有更好的方法,拜谢赐教!~) 这段时间做的传数据,传的都是字符串. 不管是传值还是传JSON,都是先转变成字符串,再做处理. 一.用JS从前端传数据到后端 1.前端<body> ...

关于layui的表格数据(前端HTML+后端SSM)——显示数据