layui 弹出层中显示table 表格_layui 弹出table-优快云博客

本文档详细介绍了如何在layui弹出层中使用html和js展示表格，包括html静态渲染表格和通过layui从后台获取data动态渲染表格的方法。

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

html:

html渲染的table

 <table id="JobTable" lay-filter="JobTable"></table>

layui弹框渲染的table

<#--            弹框的table-->

            <div id="openProductBox" style="display: none; padding: 10px;">
            <table id="openProductTable" lay-filter="openProductTable">
                <h3 style="text-align: center">签到名单</h3>
            </table>
            <table id="openProductTable2" lay-filter="openProductTable2">
                <h3 style="text-align: center">未签到名单</h3>
            </table>
        </div>

js:

layui.use('table', function() {
        var table = layui.table;
        //第一个实例
        table.render({
            elem: '#JobTable'
            , height: 350
            , url: $("#BasePath").val() + "/teacher/getQiandaoList" //数据接口
            , page: false //关闭分页
            , cols: [[ //表头
                {field: 'courseId', title: '班级号', sort: true, fixed: 'left'}
                , {field: 'registerTimes', title: '签到次数', fixed: 'left'}
                , {field: 'registerStartTime', title: '签到时间', sort: true, fixed: 'left'}
                , {field: 'registerCount', title: '签到人数', fixed: 'left'}
                , {field: 'notRegisterCount', title: '未签到人数', fixed: 'left'}
                , {field: 'action', title: '详情', fixed: 'left', toolbar: "#classActionBar"}

            ]]
        });


        table.on("tool(JobTable)", function (obj) {
            var data = obj.data;
            var layEvent = obj.event;
            if (layEvent === "select") {
                // 详情进入
                let courseId = data["courseId"];
                let registerTimes = data["registerTimes"];

                $.ajax({
                    type: "post",
                    url: $("#BasePath").val() + "/teacher/getThisQiandao",
                    data: {
                        "courseId": courseId,
                        "registerTimes": registerTimes
                    },
                    success: function (data) {
                        if (data.code == 1) {
                            var data=data.data;
                            var layer = layui.layer;
                            layer.open({
                                type: 1,
                                content: $('#openProductBox'),
                                area: ['700px', '600px'], //宽高
                                btn: ["确定"],
                                btn1: function (index){
                                 layer.close(index);
                                    window.location.reload();
                                },
                                success: function () {
                                    table.render({
                                        elem: '#openProductTable'
                                        , height: 150,
                                        data:data["register"],
                                        // url: $("#BasePath").val() + "/teacher/getQiandaoList" //数据接口,
                                        page: false //关闭分页
                                        , cols: [[ //表头
                                            {field: 'studentId', title: '学号', sort: true, fixed: 'left'}
                                            , {field: 'studentName', title: '姓名', fixed: 'left'},
                                        ]]
                                    });
                                    table.render({
                                        elem: '#openProductTable2'
                                        , height: 150,
                                        data:data["notRegister"],
                                        // url: $("#BasePath").val() + "/teacher/getQiandaoList" //数据接口,
                                        page: false //关闭分页
                                        ,  cols: [[ //表头
                                            {field: 'studentId', title: '学号', sort: true, fixed: 'left'}
                                            , {field: 'studentName', title: '姓名', fixed: 'left'},
                                        ]]
                                    });
                                    // layer.close(index)
                                }
                            })

                        } else {
                            alert("失败")
                        }

                    }
                })


            }
        })
    });

layui弹框从后台获得的data数据

{
    "code":1,
    "data":{
        "register":[
            {
                "studentId":1,
                "studentName":"张"
            }
        ],
        "notRegister":[
            {
                "studentId":181101126,
                "studentName":"流量"
            },
            {
                "studentId":300001001,
                "studentName":"胡小杨"
            }
        ]
    }
}