layui动态加载表格数据

最新推荐文章于 2025-05-26 12:38:52 发布

z_victoria123

最新推荐文章于 2025-05-26 12:38:52 发布

阅读量1.1w

点赞数 2

CC 4.0 BY-SA版权

分类专栏： layui

本文链接：https://blog.youkuaiyun.com/z_victoria123/article/details/88127474

layui 专栏收录该内容

0 篇文章

订阅专栏

本文详细介绍如何使用layui框架在网页上创建动态数据表格，包括引入css和js文件、创建table元素、利用js向表格刷入数据、后台数据封装及表格操作按钮的添加。通过具体代码示例，展示了从前端到后端的完整流程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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>