layui動態加載表格數據

1.引入css、js樣式

<link href="${ctx}/front/css/layui/css/layui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="${ctx}/front/js/libs/layui/layui.js"></script>

2.在body中創建table元素

<table class="layui-show" id="followTable" lay-filter="followTable" style="width: 80%"></table>

3.js中向指定元素刷數據

layui.use(['element', 'table'], function () {
        var $ = layui.jquery,
                element = layui.element, //Tab的切換功能，切換事件監聽等，需要依賴element模塊
                table = layui.table,
        
        table.render({
            elem: "#followTable",
            url: '${ctx}/follow/followList',
            skin: 'line',
            page: false,
            cols: [[
                {field: "id", title: "id", width: 50},
                {field: "nickname", title: "會員暱稱"},
                {field: 'right', title: '操作', toolbar: '#barDemo'},
            ]],
            done: function (res, curr, count) {
                table = res.data;
            }
        })

    })

4.後臺封裝數據，必須有code，其他的可以根據自身需要

@RequestMapping("/followList")
    @ResponseBody
    public Map<String,Object> followList(){
        List<Member> followList = fFollowService.findFollowByMemberId(Long.valueOf(2),null);
        Map<String, Object> result = new HashMap<String, Object>();
        result.put("code", 0);
        result.put("data", followList.toArray());
        return result;
    }

5.在表格後加入操作等按鈕

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">刪除</a>
</script>

<script>
layui.use(['layer'], function () {
        var $ = layui.jquery,
                element = layui.element, //Tab的切換功能，切換事件監聽等，需要依賴element模塊
                table = layui.table,
                layer = layui.layer;


        table.on('tool(followTable)', function (obj) {  //表格監聽，與lay-filter="followTable"的名字保持一致
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('您確定要刪除該用戶嗎?', {btn: ['確定', '取消'], title: "提示"}, function (index) {
                    $.ajax({
                        url: "${ctx}/follow/deleteByMemberId",
                        type: "POST",
                        data: {"memberId": data.id},
                        dataType: "json",
                        success: function (data) {
                            if (data.code == 1) {
                                obj.del();
                                layer.close(index);
                                layer.msg("刪除成功", {icon: 6});
                            } else {
                                layer.msg("刪除失敗", {icon: 5});
                            }
                        }
                    });
                });
            }
        })
    })
</script>