layui数据表格简单使用

为什么layui已经停止更新我们还在使用

1、layui是针对小型项目，对后端程序员比较友好，不用用太多的css等去调节样式！

进入主题：数据表格简单使用

前端：

新建一个HTML文件引入layui.js与layui.css(官网下载本地应用)

引入layui.js

<script src="layui/js/layui.js"></script>

引入layui.css

<link rel="stylesheet" href="layui/css/layui.css">

body页面添加一个table

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

添加表格渲染js代码（代码已经包含分页））

layui.use([table,rate, form], function () {
    var table = layui.table;
    var rate = layui.rate;
    var form = layui.form;

    var tableIns= table.render({
        elem: #test
            ,height: 580
            ,page: true
            ,limit: 20
            ,limits: [5, 10, 20, 30,40,50,60,70,80,90, 100]
            , parseData: function (res) { //res 即为原始返回的数据
                var result;
                if (res.date!=null){
                    if(this.page.curr){
                        result = res.date.slice(this.limit*(this.page.curr-1),this.limit*this.page.curr);
                    }
                    else{
                        result=res.date.slice(0,this.limit);
                    }
                }

                return {
                    "code": res.code, //解析接口状态
                    "msg": res.msg, //解析提示文本
                    "count": res.count, //解析数据长度
                    "data": result//解析数据列表
                };

            }
        , url: /user/yipingUSer
       , where:{name:sessionStorage.getItem("name")}
        , cellMinWidth: 100 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
        ,
            toolbar: #toolbarDemo
        , cols: [
            [
                {field: userId, width: 80, title: 编号, sort: true,align: center}
                , {field: username, width: 120, title: 工号},
                {field: xingming, title: 姓名, align: center}
                , {field: zhiwei, title: 职位, align: center}
                , {field: bumen, title: 部门, align: center}
            ]
        ]
    });

后端：

前端js里面有一个url为数据源接口，我这边后端写了一个数据返回类：LayuiDate.class

LayuiDate.class

package com.rr.evaluate.entity.layui;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

import java.util.List;

/**
 * @BelongsProject: evaluate
 * @BelongsPackage: com.rr.evaluate.entity.layui
 * @Author: 泡泡糖
 * @Date: 2022/11/18 18:56
 * @Description:
 * @since JDK 1.8
 */
@Data
@AllArgsConstructor
@NoArgsConstructor
public class LayuiDate<T> {
    private  Integer code;
    private  String msg;
    private  Integer count;
    private List<T> date;


}

controller层

@ResponseBody
    @GetMapping("/yipingUSer")
    public LayuiDate<Users> yipingUser() {
        List<Users> list =iUserService.list();
        LayuiDate<Users> objectLayuiDate = new LayuiDate<>();
        objectLayuiDate.setCode(0);
        objectLayuiDate.setMsg("");
        objectLayuiDate.setCount(list.size());
        objectLayuiDate.setDate(list);
        return objectLayuiDate;
    }

没有数据，是因为我数据库里面的Users表里面没有添加数据，数据库添加数据就有了，自行添加即可 ！