Layui数据表格

1. 添加表格容器   设置id 和 lay-filter

                        <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>