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

Posted coder1013

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Layui——选项卡加载table数据列表相关的知识,希望对你有一定的参考价值。

效果: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

 

以上是关于Layui——选项卡加载table数据列表的主要内容,如果未能解决你的问题,请参考以下文章

tp5.1 layui 数据表格 选项卡 同个内容框显示不同的数据列表

记录layui的table绑定事件与选项卡的使用

单击ListViewItem时Android加载片段

layui实现table加载的示例代码

保存片段状态操作栏选项卡

如何从选项卡片段中的 AsyncTask Resftful WS 加载批量数据