layui数据表格简单使用

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

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

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

前端：

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

引入layui.js

引入layui.css

body页面添加一个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 {private  Integer code;private  String msg;private  Integer count;private List date;}

controller层

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

效果图：

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

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！