僅用于個人記錄學(xué)習(xí)：demo圖

tab切換顯示動態(tài)數(shù)據(jù)的方法---如此下圖效果 tab切換顯示時  數(shù)據(jù)需要分為幾個塊（有幾個tab分幾個塊）， 且?guī)讉€狀態(tài)分開循環(huán)-如：已支付與未支付-首先先定義兩個數(shù)組，再循環(huán)data里面的數(shù)據(jù)，分別賦值給定義的數(shù)組，如-總共5條數(shù)據(jù)-已支付2條-未支付3條-已支付狀態(tài)為1--未支付狀態(tài)為0   

demo：success : function(res) {

var datas=res.list; var arry=[],arrys=[]; for(var i=0;i arry.push(datas[i]):arrys.push(datas[i]); }

//循環(huán)得到已經(jīng)支付的數(shù)據(jù)

        for(var i=0;i

$('#accountPaid').html('里面放循環(huán)出來的數(shù)據(jù)');

}

//循環(huán)得到未支付的數(shù)據(jù)

for(var k=0;k

$('#Unpaid').html(' 里面放循環(huán)出來的數(shù)據(jù)');

}

}

demo代碼：

html:

   <div class="auto ove_hidden border5 bg_whie hider">

                            <ul id="myTab" class="nav nav-tabs">

                                <li class="active"  alt='all'><a href="#home" data-toggle="tab">所有訂單</a></li>

                                <li alt='4'><a href="#ios" data-toggle="tab">支付成功</a></li>

                                <li class="dropdown" alt='0'>

                                    <a href="#nopay" data-toggle="tab">未支付</a>

                                </li>

                            </ul>

                            <div class="oder-top-btn">

                            <span>綁定票據(jù)</span>

                            <span>贈送票據(jù)</span>

                            </div>

                            <div id="myTabContent" class="tab-content">

                            <!--小標(biāo)題-->

                            <div class="order_13Left padding1 max991" style="border-right: 0px solid #D6D6D6;color:#0565b2;">

                                        <ul class="flex margin-btm0">

                                        <li>

                                            <span>商品信息</span>

                                        </li>

                                        <li>單價</li>

                                        <li>數(shù)量</li>

                                    </ul>

                                </div>

                                <div class="order_13Right1 ove_hidden padding1 max991">

                                    <ul class="margin-btm0">

                                        <li class="flex">實付款</li>

                                        <li class="flex">交易狀態(tài)</li>

                                        <li class="flex">

                                            <div class="width1" style="text-align: center;">

                                                <div class="width1">交易操作</div>

                                            </div>

                                        </li>

                                    </ul>

                                </div>

                                 <!--所有訂單-->

                                <div class="tab-pane fade in active" id="home">

                                    <div id="maxorder_boxlist0" class="maxorder_boxlist">

                                    <div class="showLoading">數(shù)據(jù)加載中 請稍等...</div>

                                    </div>

                                </div>

                                 <!--支付成功-->

                                <div class="tab-pane fade" id="ios">

                                    <div id="maxorder_boxlist1" class="maxorder_boxlist">

                                    <div class="showLoading">數(shù)據(jù)加載中 請稍等...</div>

                                    </div>

                                </div>

                                <!--未支付-->

                                <div class="tab-pane fade" id="nopay">

                                    <div id="maxorder_boxlist2" class="maxorder_boxlist">

                                    <div class="showLoading">數(shù)據(jù)加載中 請稍等...</div>

                                    </div>

                                </div>

                            </div>

                        </div>               

js:

//  我的訂單的點擊切換事件

$('#myTab li').click(function(){

var alt=$(this).attr('alt');

switch (alt){

case '0'://等待付款（未支付）

dynamicdomlist('0');

    break;

case '4'://交易成功（已支付）

dynamicdomlist('4');

    break;

}

});

function dynamicdomlist(order_status){

    var pchtml0='', pchtml='',pchtml2='';

//  $('#maxorder_boxlist0,#maxorder_boxlist1,#maxorder_boxlist2').html(' ');

//          訂單列表接口

    $.ajax({

        url : "index/orderlistapi",

        type : "post",

        data : {"data":''},

        success : function(res) {

            var datas=res.list;

            var arryall=[],arry=[],arrys=[];

            var alllist;

            //賦值數(shù)據(jù)給3個不同的數(shù)組顯示--1.所有訂單，2.支付成功，3.未支付

            for(var i=0;i<datas.length;i++){

                arryall.push(datas[i]);//所有訂單

                switch (datas[i].order_status){

                case 0://等待付款（未支付）

                case 5://關(guān)閉訂單-放在未支付里面

                arrys.push(datas[i]);

                break;

                case 4://交易成功（已支付）

                arry.push(datas[i]);

                break;

                }

            }

            switch (order_status){

            case '0'://等待付款（未支付）

            //得到未支付的數(shù)據(jù)

            alllist=arrys;

            break;

            case '4'://交易成功（已支付）

            //得到已支付的數(shù)據(jù)

            alllist=arry;

            break;

            default:

            //得到所有數(shù)據(jù)

            alllist=arryall;

            break;

            }

            //循環(huán)所有狀態(tài)---判斷在自己的狀態(tài)下自己有幾條數(shù)據(jù)

            for(var a=0;a<alllist.length;a++){

                var alllist_data=alllist[a];

                var order_statusv=alllist_data.order_status;

                //時間格式轉(zhuǎn)化

                var order_no= alllist_data.order_no.substr(0,4)+"-"+alllist_data.order_no.substr(4,2)+"-"+alllist_data.order_no.substr(6,2);

                var order_statusvstr='';

                var orderendstatus='';

                if(order_statusv==-1){

                    order_statusvstr='退款中';

                }else if(order_statusv==0){

                    order_statusvstr='等待付款';

                    orderendstatus='關(guān)閉訂單';

                }

                else if(order_statusv==4){

                    order_statusvstr='交易成功';

                }else{

                    order_statusvstr='訂單關(guān)閉';

                }

                var sum=0;

                sum=alllist_data.pay_money;

                pchtml+='<div class="order_box">';

                pchtml+='    <div class="order_1">';

                pchtml+='        <div class="order_12 auto">';

                pchtml+='            <span>'+order_no+'</span>';

                pchtml+='           <span> 訂單流水號：'+alllist_data.out_trade_no+'</span>';

                pchtml+='            <span  class="iconfont icon-shanchu delete"></span>';

                pchtml+='        </div>';

                pchtml+='    </div>';

                pchtml+='    <div class="ove_hidden height_order">';

                pchtml+='       <div class="order_13Left">';

                pchtml+='            <div class="div-input"><input type="checkbox" id="" name="" lay-skin="primary" lay-filter="ticket" value="">';

pchtml+='            </div>';

                //得到每一項中的訂單量

                (function(i){

                    for(var j=0;j<alllist_data.ticket_list.length;j++){

                        var datalist=alllist_data.ticket_list[j];

//                      sum+=datalist.price*datalist.num;

                        pchtml+='        <ul class="flex margin-btm0 padding1 br-btm br-top">';

                        pchtml+='             <li>';

                        pchtml+='                 <span class="first_span">'+datalist.ticket_name+'</span>';

                        pchtml+='                  <span class="color_gay">使用日期：'+datalist.start_time.substr(0, 10)+' - '+datalist.end_time.substr(0, 10)+'</span>';

                        pchtml+='                  <span class="color_gay max992 Mobile">單價：￥'+datalist.price+'</span>';

                        pchtml+='                  <span class="color_gay max992 Mobile">數(shù)量：'+datalist.num+'</span>';

                        pchtml+='              </li>';

                        pchtml+='              <li class="max991 pc">￥<span>'+datalist.price+'</span></li>';

                        pchtml+='              <li class="max991 pc">'+datalist.num+'</li>';

                        pchtml+='           </ul>';

                    }

                })(i)

                pchtml+='       </div>';

                pchtml+='       <div class="order_13Right ">';

                pchtml+='            <ul class="margin-btm0">';

                pchtml+='                <li class="flex max991">￥<span>'+sum+'</span></li>';

                pchtml+='                <li class="flex max991 pc">'+order_statusvstr+'</li>';

                pchtml+='                <li class="flex Mobile">';

                pchtml+='                   <div class="width1">';

                pchtml+='                        <div class="width1 max992 Mobile">'+order_statusvstr+'</div>';

                pchtml+='                        <div class="width1 check_order">';

                pchtml+='                            <a class="layui-btn layui-btn-normal layui-btn-xs" href="orderdetail?no='+alllist_data.order_id+'">查看</a>';

                if(order_statusv==0){

                    pchtml+='                        <a class="layui-btn layui-btn-warm layui-btn-xs " href="/platform/pay/getpayvalue?out_trade_no='+alllist_data.out_trade_no+'">去付款</a>';

                pchtml+='                        <a class="layui-btn layui-btn-danger layui-btn-xs">'+orderendstatus+'</a>';

                }else{}

                pchtml+='                        </div>';

                pchtml+='                    </div></li></ul></div></div></div>';

                switch (order_status){

            case '0':

            //得到未支付的數(shù)據(jù)

            $('#maxorder_boxlist2').html(pchtml);

            break;

            case '4':

            //得到已支付的數(shù)據(jù)

            $('#maxorder_boxlist1').html(pchtml);

            break;

            default:

            //得到所有數(shù)據(jù)

            $('#maxorder_boxlist0').html(pchtml);

            break;

            }

            }

            //刪除按鈕

            $('.delete').click(function(){

                $(this).parents('.order_box').remove();

            });

          },

        error: function(xhr, textStatus) { //錯誤

            console.log(xhr);

        }

    });

}