<div>
<table id="active-info" lay-filter="active"></table>
</div>2.
layui.use('table', function () {
var table = layui.table;
//第一个实例
table.render({
elem: '#active-info'
, height: 312
, url: 'http://localhost:8080/Graduation_project_1_war/Activity_Servlet' //数据接口
, page: true //开启分页
, loading: true
, toolbar: "#toolbarhead"//这是绑定表头工具栏
, text: {
none: "您还没有参加任何活动"
}
, parseData: function (res) {
console.log(res);
return {
"code": 0,//数据状态
"msg": "",//数据信息
"count": 5,//数据总数
data: res
}
}
, cols: [[ //表头
, {field: 'activists', title: '活动名称', width: 200, sort: true,}
, {field: 'activists_inf', title: '活动内容', width: 200, sort: true}
, {field: 'activities_date', title: '活动日期', width: 200}
, {
fixed: 'right',
title: '查看详情',
width: 220,
align: 'center',
toolbar: '#toolbar'//这是绑定表格内工具栏
}
]]
});
table.on('tool(active)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
var data = obj.data; //获得当前行数据
var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
console.log(data)
if (layEvent === 'detail') { //查看
//do somehing
} else if (layEvent === 'del') { //删除
layer.msg('删除', {
time: 0,
btn: ['确定']
, closeBtn: 1,
yes: function () {
axios({
method: "post"
,
url: 'http://localhost:8080/Graduation_project_1_war/personal_active_change_Servlet'
,
data: data
}).then(Response => {
var data = Response.data;
if (data == 1) {
table.reload('active-info')
}
})
}
})
}
});
});
3.设置toobar
<script type="text/html" id="toolbar">
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>