运行效果
页面增删改查登录搜索均已实现,后续会慢慢编写相应博客
前端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;
}
}
写了后发现自己对代码真的了解不够多,如果有问题的话可以评论,我看到的话会回复的,因为也是第一次写,有很多的不足之处,或者上边解释错误的话,还望各位批评指正