<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table模块快速使用</title>
<link href="layui/css/layui.css" rel="stylesheet" />
<script src="js/jquery-3.3.1.js"></script>
<script src="layui/layui.js"></script>
</head>
<body>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<table id="demo" lay-filter="test"></table>
<script>
layui.use(‘table‘, function () {
var table = layui.table;
//第一个实例
var ta = table.render({
elem: ‘#demo‘
, height: 312
, url: ‘https://localhost:44368/api/UserInfo/GetAll‘ //数据接口
, page: true //开启分页
, limit: 3 //页容量 pagesize
, cols: [[ //表头
{ field: ‘UId‘, title: ‘编号‘, width: 80, sort: true, fixed: ‘left‘ }
, { field: ‘UName‘, title: ‘用户名‘, width: 80 }
, { field: ‘Pass‘, title: ‘密码‘, width: 80, sort: true }
, { fixed: ‘right‘, width: 165, align: ‘center‘, toolbar: ‘#barDemo‘ }
]]
});
table.on(‘tool(test)‘, function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data //获得当前行数据
, layEvent = obj.event; //获得 lay-event 对应的值
if (layEvent === ‘detail‘) {
layer.msg(‘查看操作‘);
} else if (layEvent === ‘del‘) {
layer.confirm(‘真的删除行么‘, function (index) {
//obj.del(); //删除对应行（tr）的DOM结构
layer.close(index);
//向服务端发送删除指令
$.ajax({
url: ‘https://localhost:44368/api/UserInfo/Remove/‘ + Id,
type: ‘post‘,
data: {},
dataType: ‘json‘,
success: function (data) {
if (data > 0) {
alert(‘删除成功‘);
ta.reload();//重新刷新页面
}
}
});
});
} else if (layEvent === ‘edit‘) {
location.href = "/Edit.html?Id=" + Id;
}
});
});
</script>
</body>
</html>
layui数据表格
原文：https://www.cnblogs.com/yiweizheng/p/12322860.html
