Layui——选项卡加载table数据列表

Posted 2020-12-22 coder1013

效果：2个tabel  进入页面的时候 同事ajax拉取了数据  点击选项卡展示不同的tabel 

 

 

 

 

 

html代码

<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
    <ul class="layui-tab-title">
        <li class="layui-this" id="card">储值卡充值</li>
        <li id="tech">关注技师</li>
    </ul>

    <div class="layui-tab-content" style="height: 100px;">
        <div class="layui-tab-item layui-show">
            <table class="layui-hide" id="cardList" style="text-align: center;" lay-filter="cardList"></table>
        </div>
        <div class="layui-tab-item">
            <table class="layui-hide" id="techList" style="text-align: center;" lay-filter="cardList"></table>
        </div>
    </div>
</div>

View Code

JS代码

<script>
    layui.use([‘laydate‘, ‘laypage‘, ‘layer‘, ‘table‘, ‘carousel‘, ‘upload‘, ‘element‘,‘laytpl‘], function(){
        var $ = layui.jquery
                ,laypage = layui.laypage //分页
                ,layer = layui.layer //弹层
                ,table = layui.table //表格
                ,laytpl = layui.laytpl
                ,element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
            //储值卡列表
            table.render({
                elem: ‘#cardList‘
                ,url:‘zlkj_user_info.php?act=getList‘
                ,where:{uid:document.getElementById(‘uid‘).value}
                ,page: {
                    layout: [‘count‘, ‘prev‘, ‘page‘, ‘next‘, ‘skip‘]
                    ,groups: 5
                }
                ,limit: 10 //每页默认显示的数量
                ,cols: [
                    [
                        {field:‘buy_time‘, title: ‘充值时间‘,align:‘center‘}
                        ,{field:‘pay_type‘, title: ‘充值方式‘,align:‘center‘}
                        ,{field:‘pay_money‘, title: ‘充值金额(元)‘,align:‘center‘}
                        ,{field:‘give_money‘, title: ‘赠送金额(元)‘,align:‘center‘}
                        ,{field:‘discount‘, title: ‘实际折扣‘,align:‘center‘}
                        ,{field:‘card_balance‘, title: ‘账户储值卡显示余额(元)‘,align:‘center‘}
                        ,{field:‘member_dis‘, title: ‘会员卡当前折扣‘,align:‘center‘}
                    ]
                ]
                ,request: {
                    pageName: ‘page‘ //页码的参数名称，默认：page
                    ,limitName: ‘limit‘ //每页数据量的参数名，默认：limit
                }
                ,parseData: function(res){ //res 即为原始返回的数据
                    return {
                        "code": res.code, //解析接口状态
                        "count": res.count, //解析接口状态
                        "data": res.data //解析数据列表
                    };
                }
                ,done: function (res) {

                }
            });

        // show();
        //关注技师列表
        table.render({
            elem: ‘#techList‘
            ,url:‘zlkj_user_info.php?act=getUserLike‘
            ,where:{uid:document.getElementById(‘uid‘).value}
            ,page: {
                layout: [‘count‘, ‘prev‘, ‘page‘, ‘next‘, ‘skip‘]
                ,groups: 5
            }
            ,limit: 10 //每页默认显示的数量
            ,cols: [
                [
                    {field:‘head_img‘, align:‘center‘,title: ‘技师图片‘,templet:function (d) {
                        if(d.head_img != ‘‘){
                            return "<div><img src="+d.head_img+"></div>";
                        }else{
                            return "";
                        }
                    }}
                    ,{field:‘nick_name‘, title: ‘技师昵称‘,align:‘center‘}
                    ,{field:‘labels‘, title: ‘技师标签‘,align:‘center‘}
                    ,{field:‘like_time‘, title: ‘关注时间‘,align:‘center‘}
                ]
            ]
            ,request: {
                pageName: ‘page‘ //页码的参数名称，默认：page
                ,limitName: ‘limit‘ //每页数据量的参数名，默认：limit
            }
            ,parseData: function(res){ //res 即为原始返回的数据
                return {
                    "code": res.code, //解析接口状态
                    "count": res.count, //解析接口状态
                    "data": res.data //解析数据列表
                };
            }
            ,done: function (res) {

            }
        });
    });
</script>

View Code