僅用于個(gè)人記錄學(xué)習(xí):demo圖
tab切換顯示動(dòng)態(tài)數(shù)據(jù)的方法---如此下圖效果 tab切換顯示時(shí) 數(shù)據(jù)需要分為幾個(gè)塊(有幾個(gè)tab分幾個(gè)塊), 且?guī)讉€(gè)狀態(tài)分開循環(huán)-如:已支付與未支付-首先先定義兩個(gè)數(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>贈(zèng)送票據(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>單價(jià)</li>
<li>數(shù)量</li>
</ul>
</div>
<div class="order_13Right1 ove_hidden padding1 max991">
<ul class="margin-btm0">
<li class="flex">實(shí)付款</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ù)加載中 請(qǐng)稍等...</div>
</div>
</div>
<!--支付成功-->
<div class="tab-pane fade" id="ios">
<div id="maxorder_boxlist1" class="maxorder_boxlist">
<div class="showLoading">數(shù)據(jù)加載中 請(qǐng)稍等...</div>
</div>
</div>
<!--未支付-->
<div class="tab-pane fade" id="nopay">
<div id="maxorder_boxlist2" class="maxorder_boxlist">
<div class="showLoading">數(shù)據(jù)加載中 請(qǐng)稍等...</div>
</div>
</div>
</div>
</div>
js:
// 我的訂單的點(diǎn)擊切換事件
$('#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個(gè)不同的數(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;
//時(shí)間格式轉(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> 訂單流水號(hào):'+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>';
//得到每一項(xiàng)中的訂單量
(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">單價(jià):¥'+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) { //錯(cuò)誤
console.log(xhr);
}
});
}
聯(lián)系客服