$('#relevanceOrderTable').on('click', 'td.details-control', function (e) {
$('#relevanceOrderTable .childTable').remove();
var saleId=$(this).children('span').data('saleid');
if(saleId=='--'||saleId==undefined||saleId==null){
saleId='';
}
var table=$('#relevanceOrderTable').DataTable();
childIsShown(this,table,saleId);
e.stopPropagation();
$(this).unbind("click"); //移除click
return false;
});
以上是比如点击某一单元格，那么会下拉出来一个表格（也就是动态生成一个新的表格在其父级（tr）下面）
此时调用childIsShown(this,table,saleId); this指当前点击的td，table就是$(id).DataTable();saleId它是额外的参数，看自己需求
function childIsShown(that,table,saleId){
var tr = $(that).closest('tr'); //获取点击时的td的父级tr，这个方法closest含义还不是很清楚
var row = table.row( tr );//传给table
if(row.child.isShown()){ //判断tr是否是显示状态
//This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}else{
tr.addClass('shown');
// row.child(formatTable('/api/main/queryData?resourceName=host&metricName=host_order_flow_list?saleId='+saleId)).show();
// row.child(formatTable('/styles/js/mock_data/chakan.txt')).show();
var zjp={};
var zjpTotal=0;
$.ajax({
// url:'/styles/js/mock_data/chakan.txt',
url:'/api/main/queryData?resourceName=host&metricName=host_order_flow_list&saleId='+saleId+'&pageNo=1&pageSize=10',
data : {
},
async: false,
dataType:"json",
success:function(responseData){
if (!responseData.success || responseData.data == null) {
zjp={};
zjpTotal=0;
}
if(responseData.code==200){
if(responseData.data.length>0){
var data=responseData.data;
zjp=data;
zjpTotal=responseData.total;
// console.log('bbb');
}else{
zjp={};
zjpTotal=0;
}
}else{
zjp={};
zjpTotal=0;
}//200
}//succ
});//ajax end
row.child(formatTable(zjp,zjpTotal,saleId)).show();//此方法是 动态生成表格的方法（也可以动态生成其他业务内容，不一定非是表格才行），
//formatTable它传参的时候 对于是否可以传URl这个目前还没有验证，因为之前传url时 出现了bug不知道是不是它引起的
}
}
function formatTable(zjp,zjpTotal,saleId) {
var trList='';
var page='';
if(!$.isEmptyObject(zjp)){
$.each(zjp,function(i,v){
trList+='<tr>'+
'<td>'+(v.orderId==null?'--':v.orderId)+'</td>'+
'<td>'+(v.bizNo==null?'--':v.bizNo)+'</td>'+
'<td>'+(v.traceId==null?'--':v.traceId)+'</td>'+
'<td>'+(v.productionName==null?'--':v.productionName)+'</td>'+
'<td>'+(v.action==null?'--':v.action)+'</td>'+
'<td>'+(v.bizContent==null?'--':v.bizContent)+'</td>'+
'<td>'+(v.bizStatus==null?'--':v.bizStatus)+'</td>'+
'<td>'+(v.valid==null?'--':v.valid==true?"是":v.valid==false?"否":v.valid)+'</td>'+
'<td>'+(v.shouldPay==null?'--':v.shouldPay)+'</td>'+
'<td>'+(v.realPay==null?'--':v.realPay)+'</td>'+
'<td>'+(v.buyPeriodNum==null?'--':v.buyPeriodNum)+'</td>'+
'<td>'+(v.orderDate==null?'--':new Date(v.orderDate).format('yyyy-MM-dd HH:mm:ss'))+'</td>'+
'<td>'+(v.orderSuccessDate==null?'--':new Date(v.orderSuccessDate).format('yyyy-MM-dd HH:mm:ss'))+'</td>'+
'<td>'+(v.expiredTime==null?'--':new Date(v.expiredTime).format('yyyy-MM-dd HH:mm:ss'))+'</td>'+
'<td>'+(v.remark==null?'--':v.remark)+'</td>'+
'</tr>'
});
}else{
trList='<tr class="odd"><td valign="top" colspan="15" class="dataTables_empty">No data available in table</td></tr>';
}
if(zjpTotal==0){
page='';
}else if(zjpTotal==1){
page='<div class="oneSelfPage" style="text-align:right;margin-top:10px;"><span class="upPage" data-saleId="'+saleId+'" data-upPage="1" style="margin-right:15px;padding:5px 10px;border:1px solid rgb(0, 193, 222);cursor:pointer;">上一页</span><span class="downPage" data-total="'+zjpTotal+'" data-saleId="'+saleId+'" data-downPage="1" style="padding:5px 10px;border:1px solid rgb(0, 193, 222);cursor:pointer;">下一页</span></div>';
}else if(zjpTotal==2){
page='<div class="oneSelfPage" style="text-align:right;margin-top:10px;"><span class="upPage" data-saleId="'+saleId+'" data-upPage="1" style="margin-right:15px;padding:5px 10px;border:1px solid rgb(0, 193, 222);cursor:pointer;">上一页</span><span class="downPage" data-total="'+zjpTotal+'" data-saleId="'+saleId+'" data-downPage="2" style="padding:5px 10px;border:1px solid rgb(0, 193, 222);cursor:pointer;">下一页</span></div>';
}else{
page='<div class="oneSelfPage" style="text-align:right;margin-top:10px;"><span class="upPage" data-saleId="'+saleId+'" data-upPage="1" style="margin-right:15px;padding:5px 10px;border:1px solid rgb(0, 193, 222);cursor:pointer;">上一页</span><span class="downPage" data-total="'+zjpTotal+'" data-saleId="'+saleId+'" data-downPage="2" style="padding:5px 10px;border:1px solid rgb(0, 193, 222);cursor:pointer;">下一页</span></div>';
}
// `d` is the original data object for the row
return '<table class="childTable" cellpadding="5" cellspacing="0" border="0" style="100%;background-color:#ddd;">'+
'<tr>'+
'<td style="8%">订单号</td>'+
'<td style="8%">业务编号</td>'+
'<td style="8%">业务跟踪号</td>'+
'<td style="8%">产品名称</td>'+
'<td style="6%">产品行为</td>'+
'<td style="8%">业务内容</td>'+
'<td style="6%">业务状态</td>'+
'<td style="6%">有效状态</td>'+
'<td style="6%">应收款</td>'+
'<td style="6%">实收款</td>'+
'<td style="6%">服务期限</td>'+
'<td style="6%">下单日</td>'+
'<td style="6%">成功日</td>'+
'<td style="6%">到期日</td>'+
'<td style="6%">备注</td>'+
'</tr>'+trList+ '</table>'+page;
}