关于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;
}
}

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