layui中，同一个页面动态加载table数据表格

效果图：

前端代码：

<div class="layui-fluid" id="record-user" hidden="hidden">
    <div class="layui-card">
        <div class="layui-form" lay-filter="datafile">
            <div class="layui-form-item">
                <div class="layui-tab layui-tab-card">
                    <ul class="layui-tab-title">
                        <li class="layui-this">xx</li>
                        <li>xx</li>
                        <li>xx</li>
                        <li>xx</li>
                        <li>xx</li>
                    </ul>
                    <div class="layui-tab-content">
                        <div class="layui-tab-item layui-show">
                            <table id="qqdata" lay-filter="qqdata" class="layui-table" lay-data="{id:'qqdata'}"></table>
                        </div>

                        <div class="layui-tab-item">
                            <table id="wechatdata" lay-filter="wechatdata" class="layui-table" lay-data="{id:'wechatdata'}"></table>
                        </div>

                        <div class="layui-tab-item">
                            <table id="telephonedata" lay-filter="telephonedata" class="layui-table" lay-data="{id:'telephonedata'}"></table>
                        </div>

                        <div class="layui-tab-item">
                            <table id="computerdata" lay-filter="computerdata" class="layui-table" lay-data="{id:'computerdata'}"></table>
                        </div>

                        <div class="layui-tab-item">
                            <table id="rechargecarddata" lay-filter="rechargecarddata" class="layui-table" lay-data="{id:'rechargecarddata'}"></table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

js 代码：

ayer.open({
            type:1,
            title: 'xxx--xx：'+ xxx,
            content: $('#record-user'),
            btn:['确定','取消'],
            area: ['80%', '90%'],
            resize: false,
            move: false,
            success : function(res){
                //qq
                layui.table.render({
                    elem: "#qqdata",
                    url: "{:url('xxx')}",
                    method: 'POST',
                    page: true,
                    cellMinWidth: 80,
                    done: function(res) {

                    },
                    page: true,
                    cols: [[
                        // {type: 'checkbox', fixed: 'left'},
                        {field: 'xx', title: 'xxx', sort: true,  align: 'center'},
                        {field: 'xx', title: 'xxx', sort: true,  align: 'center'},
                        {field: 'x', title: 'xxx', sort: true,  align: 'center'},
                        {field: 'xxx', title: 'xxx', sort: true,  style:'color:red',align: 'center'},
                        {field: 'xx', title: 'xx', sort: true,  align: 'center'},
                    ]] ,
                    where: {xxxx:xxx},
                })

                //wechat
                layui.table.render({
                    elem: "#wechatdata",
                    url: "{:url('xxx')}",
                    method: 'POST',
                    page: true,
                    cellMinWidth: 80,
                    done: function(res) {

                    },
                    page: true,
                    cols: [[
                        // {type: 'checkbox', fixed: 'left'},
                        {field: 'xxxx', title: 'xxx', sort: true,  align: 'center'},
                        {field: 'xxxx', title: 'xxxx', sort: true,  align: 'center'},
                        {field: 'xxxx', title: 'xxxx', sort: true,  align: 'center'},
                        {field: 'xxx', title: 'xxx', sort: true,  style:'color:red',align: 'center'},
                        {field: 'xxxx', title: 'xxxx', sort: true,  align: 'center'},
                    ]] ,
                    where: {xxxxx:xx},
                })