|
仅用于个人记录学习：demo图  tab切换显示动态数据的方法---如此下图效果 tab切换显示时 数据需要分为几个块（有几个tab分几个块）， 且几个状态分开循环-如：已支付与未支付-首先先定义两个数组，再循环data里面的数据，分别赋值给定义的数组，如-总共5条数据-已支付2条-未支付3条-已支付状态为1--未支付状态为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]); } //循环得到已经支付的数据 for(var i=0;i $('#accountPaid').html('里面放循环出来的数据'); } //循环得到未支付的数据 for(var k=0;k $('#Unpaid').html(' 里面放循环出来的数据'); } } 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>绑定票据</span> <span>赠送票据</span> </div> <div id="myTabContent" class="tab-content"> <!--小标题--> <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>数量</li> </ul> </div> <div class="order_13Right1 ove_hidden padding1 max991"> <ul class="margin-btm0"> <li class="flex">实付款</li> <li class="flex">交易状态</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">数据加载中 请稍等...</div> </div> </div> <!--支付成功--> <div class="tab-pane fade" id="ios"> <div id="maxorder_boxlist1" class="maxorder_boxlist"> <div class="showLoading">数据加载中 请稍等...</div> </div> </div> <!--未支付--> <div class="tab-pane fade" id="nopay"> <div id="maxorder_boxlist2" class="maxorder_boxlist"> <div class="showLoading">数据加载中 请稍等...</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; //赋值数据给3个不同的数组显示--1.所有订单，2.支付成功，3.未支付 for(var i=0;i<datas.length;i++){ arryall.push(datas[i]);//所有订单 switch (datas[i].order_status){ case 0://等待付款（未支付） case 5://关闭订单-放在未支付里面 arrys.push(datas[i]); break; case 4://交易成功（已支付） arry.push(datas[i]); break; } } switch (order_status){ case '0'://等待付款（未支付） //得到未支付的数据 alllist=arrys; break; case '4'://交易成功（已支付） //得到已支付的数据 alllist=arry; break; default: //得到所有数据 alllist=arryall; break; } //循环所有状态---判断在自己的状态下自己有几条数据 for(var a=0;a<alllist.length;a++){ var alllist_data=alllist[a]; var order_statusv=alllist_data.order_status; //时间格式转化 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='关闭订单'; } else if(order_statusv==4){ order_statusvstr='交易成功'; }else{ order_statusvstr='订单关闭'; } 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">数量：'+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': //得到未支付的数据 $('#maxorder_boxlist2').html(pchtml); break; case '4': //得到已支付的数据 $('#maxorder_boxlist1').html(pchtml); break; default: //得到所有数据 $('#maxorder_boxlist0').html(pchtml); break; } } //删除按钮 $('.delete').click(function(){ $(this).parents('.order_box').remove(); }); }, error: function(xhr, textStatus) { //错误 console.log(xhr); } }); } |
|
|
