Layui生成动态数据表格

Layui中的数据表格用于对表格进行一些列功能和动态化数据操作，涵盖了日常业务所涉及的几乎全部需求。支持固定表头、固定行、固定列左/列右，支持拖拽改变列宽度，支持排序，支持多级表头，支持单元格的自定义模板，支持对表格重载（比如搜索、条件筛选等），支持复选框，支持分页，支持单元格编辑等等一些列功能。
创建一个table实例最简单的方式是，在页面放置一个元素

，然后通过 table.render() 方法指定该容器，如下所示

下面就是它对应的代码：
Html部分：

JS部分：

var tabEmployee;
$(function () {
layui.use(['table'], function () {
var layuiTable = layui.table;
tabEmployee = layuiTable.render({
elem: "#tabEmployee",
url: 'selectEmployeeAll', //数据接口
page: true //开启分页
cols: [[
{ type: "checkbox", fixed: "left" },
{ type: "numbers", title: "序号" },
{ field: "EmployeeID", title: "EmployeeID", hide: true },
{ field: "EmployeeNumber", title: "编号", align: "center" },
{ field: "EmployeeName", title: "姓名", align: "center" },
{ field: "Phone", title: "电话", align: "center" },
{ field: "Cellphone", title: "手机", align: "center" },
{ field: "DepartmentName", title: "部门", align: "center" },
{ field: "PositionName", title: "职位", align: "center" },
{ field: "Address", title: "地址", align: "center" },
{ field: "Remark", title: "备注", align: "center" },
]]
});
});
});

LayuiTablePage类：将数据库查询出的数据进行分页

/// 

/// layui table组件分页请求数据封装
/// 
public class LayuiTablePage
{
/// page 代表当前页码
public int page { get; set; }
/// limit 代表每页数据量
public int limit { get; set; }
//方法
/// 分页开始序号
public int GetStartIndex()
{
return (page - 1) * limit;
}
/// 分页结束序号
public int GetEndIndex()
{
return page * limit - 1;
}
}

LayuiTableData类：将查询的数据实例化

public class LayuiTableData
{
/// 数据状态码 -- 可以不设置
public int code { get; set; }
/// 状态信息 -- 可以不设置
public string msg { get; set; }
/// 总行数 -- 必须`在这里插入代码片`
public int count { get; set; }
/// 数据 -- 必须
public List data { get; set; }
}
Vo类：数据表中需要通过外键获取表中没有的字段
public class EmployeeVo:PW_Employee
{
/// 部门名称
public string DepartmentName { get; set; }
/// 职位名称
public string PositionName { get; set; }
}

控制器方法：