先上一张展示图：
效果还是很好看的，看下如何实现的吧
当然首先要做好准备工作，下载layui文件到自己的项目中去，下载地址https://www.layui.com/
最好之后，看例子吧
其中的数据源放在json格式的文件中，使用layui框架，返回的数据格式要按照他们定义的格式来，不然是获取不到数据的。
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<title>layui在线调试</title>
<link rel="stylesheet" href="layui/css/layui.css" media="all">
<!--这里要改成自己的资源路径-->
<style>
body {
margin: 20px;
}
</style>
</head>
<body>
<table class="layui-hide" id="demo" lay-filter="test"></table>
<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>
</body>
<script src="layui/layui.js"></script>
<!--这里要改成自己的资源路径-->
<script>
layui.use('table', function() {
var table = layui.table; //表格
//向世界问个好
layer.msg('Hello World');
//执行一个 table 实例
table.render({
elem: '#demo',
height: 600,
url: 'new.json',//数据接口
title: '用户表',
page: true, //开启分页
toolbar: 'default' ,//开启工具栏，此处显示默认图标，可以自定义模板，详见文档,
totalRow: true ,//开启合计行
cols: [//表头
[
{ type: 'checkbox', fixed: 'left' },
{ field: 'id', title: 'ID', width: 80, sort: true },
{ field: 'username', title: '用户名', width: 80 },
{ field: 'sex', title: '性别', width: 80, sort: true },
{ field: 'city', title: '城市', width: 80 },
{ field: 'sign', title: '签名', width: 177 },
{ field: 'experience', title: '积分', width: 80, sort: true },
{ field: 'score', title: '评分', width: 80, sort: true },
{ field: 'classify', title: '职业', width: 80 },
{ field: 'wealth', title: '财富', width: 135, sort: true },
{ fixed: 'right', width: 378, align: 'center', toolbar: '#barDemo' }
]
]
});
//监听 头 工具栏事件
table.on('toolbar(test)', function(obj) {
var checkStatus = table.checkStatus(obj.config.id),
data = checkStatus.data; //获取选中的数据
switch(obj.event) {
case 'add':
layer.msg('添加');
break;
case 'update':
if(data.length === 0) {
layer.msg('请选择一行');
} else if(data.length > 1) {
layer.msg('只能同时编辑一个');
} else {
layer.alert('编辑 [id]：' + checkStatus.data[0].id);
}
break;
case 'delete':
if(data.length === 0) {
layer.msg('请选择一行');
} else {
layer.msg('删除');
}
break;
};
});
//监听 行 工具事件
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);
//向服务端发送删除指令
});
} else if(layEvent === 'edit') {
layer.msg('编辑操作:<br>' + JSON.stringify(data));
}
});
});
</script>
</html>
对了还有new.json数据接口：
{
"code": 0,
"msg": "",
"count": 100,
"data": [
{
"id": 10000,
"username": "user-0",
"sex": "女",
"city": "城市-0",
"sign": "签名-0",
"experience": 255,
"logins": 24,
"wealth": 82830700,
"classify": "作家",
"score": 57
}, {
"id": 10001,
"username": "user-1",
"sex": "男",
"city": "城市-1",
"sign": "签名-1",
"experience": 884,
"logins": 58,
"wealth": 64928690,
"classify": "词人",
"score": 27
}, {
"id": 10002,
"username": "user-2",
"sex": "女",
"city": "城市-2",
"sign": "签名-2",
"experience": 650,
"logins": 77,
"wealth": 6298078,
"classify": "酱油",
"score": 31
}, {
"id": 10003,
"username": "user-3",
"sex": "女",
"city": "城市-3",
"sign": "签名-3",
"experience": 362,
"logins": 157,
"wealth": 37117017,
"classify": "诗人",
"score": 68
}, {
"id": 10004,
"username": "user-4",
"sex": "男",
"city": "城市-4",
"sign": "签名-4",
"experience": 807,
"logins": 51,
"wealth": 76263262,
"classify": "作家",
"score": 6
}, {
"id": 10005,
"username": "user-5",
"sex": "女",
"city": "城市-5",
"sign": "签名-5",
"experience": 173,
"logins": 68,
"wealth": 60344147,
"classify": "作家",
"score": 87
}, {
"id": 10006,
"username": "user-6",
"sex": "女",
"city": "城市-6",
"sign": "签名-6",
"experience": 982,
"logins": 37,
"wealth": 57768166,
"classify": "作家",
"score": 34
}, {
"id": 10007,
"username": "user-7",
"sex": "男",
"city": "城市-7",
"sign": "签名-7",
"experience": 727,
"logins": 150,
"wealth": 82030578,
"classify": "作家",
"score": 28
}, {
"id": 10008,
"username": "user-8",
"sex": "男",
"city": "城市-8",
"sign": "签名-8",
"experience": 951,
"logins": 133,
"wealth": 16503371,
"classify": "词人",
"score": 14
}, {
"id": 10009,
"username": "user-9",
"sex": "女",
"city": "城市-9",
"sign": "签名-9",
"experience": 484,
"logins": 25,
"wealth": 86801934,
"classify": "词人",
"score": 75
}, {
"id": 10010,
"username": "user-10",
"sex": "女",
"city": "城市-10",
"sign": "签名-10",
"experience": 1016,
"logins": 182,
"wealth": 71294671,
"classify": "诗人",
"score": 34
}
]
}
好了到这里就完成了，动手看看效果吧
具体参数详解请看layui官方文档：点我
demo案例下载地址：