我使用此Example构建了一个master-detail数据表，我还使用以下Example构建了一个分组数据表。
组合两个示例以构建包含master-detail的分组表时， 细节没有显示;函数返回纠正HTML但它没有呈现：
loadAjaxInfo(row.data(), function(formattedContent){
// Open this row
row.child(formattedContent).show();
tr.addClass('shown');
});
formattedContent包含正确的HTML，但我无法显示。
编辑1 完整脚本
function BindDataTmpTable() {
var tmpcolumnArrayToHide = [7, 8, 9, 10, 11, 12, 13, 14, 15];
var strSearchLang = " بحث ";
if (lang == 'en-US') {
strSearchLang = " Search ";
}
$.ajax({
type: "Post",
url: 'Query.asmx/FillTmpTransData',
contentType: "application/json; charset=utf-8",
dataType: "json",
data: '{ }',
success: function (data) {
Tmptable = $('#TmpbasicTable').DataTable({
"aaData": JSON.parse(data.d),
"bFilter": true,
"paging": false,
"aaSorting": [],
"order": [[2, 'asc']],
"bInfo": false,
"lengthChange": false,
"oLanguage": {
"sSearch": strSearchLang
},
"columns": [
{ "data": null }, { "data": "id" }, { "data": "Trans_No" },
{ "data": "tmpDate" }, { "data": "Trans_Date" }, { "data": "TransDesc" },
{ "data": "Trans_TypeName" }
, { "data": "Doc_TypeName" }, { "data": "Doc_Serial" }
, { "data": "Money" }, { "data": "Is_Periodic" }
, { "data": "Analitic" }, { "data": "Benifit_Id" }
, { "data": "Benifit_Name" }, { "data": "First_Pay" }
, { "data": "FirstPay_Allow_Period" }, { "data": "Agent_Commision" }
],
"columnDefs": [
{
"targets": tmpcolumnArrayToHide,
"visible": false,
"searchable": true
}, {
"targets": 17,
"data": null,
"className": "FixedWidth",
"defaultContent":
' <button class="btn btnEdit" type="button"> <i class="fa fa-pencil " style="font-size:20px"></i> </button> <button class="btn btnDelete" type="button"> <i class="fa fa-trash " style="font-size:20px"></i> </button>'
}, {
"targets": 1,
"className": "hide_column"
}, {
"targets": 0,
"data": null,
"defaultContent":
' <button class="btn btnInfo" type="button"> <i class="fa fa-info" style="font-size:20px"></i> </button> '
},
{
"targets": 10,
"data": null,
render: function (data, type, row) {
switch (data) {
case 1: return '<input type=\"checkbox\" onclick="return false" checked value="' + data + '">'; break;
case 0: return '<input type=\"checkbox\" onclick="return false" value="' + data + '">'; break;
}
},
"defaultContent":
'<input type=\"checkbox\" onclick="return false" value="' + data + '">'
}
,
],
"drawCallback": function (settings) {
var api = this.api();
var rows = api.rows({ page: 'current' }).nodes();
var last = null;
api.column(2, { page: 'current' }).data().each(function (group, i) {
if (last !== group) {
$(rows).eq(i).before(
'<tr class="group"><td colspan="8">' + group + '</td></tr>'
);
last = group;
}
});
}
});
},
error: function (err) {
// alert(err);
}
})
}
$('#TmpbasicTable tbody').on('click', '.btnInfo', function (e) {
var tr = $(this).closest('tr');
var row = table.row(tr);
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
loadAjaxInfoTmpSubTrans(tr[0].cells[1].innerHTML, function (formattedContent) {
// Open this row
row.child(formattedContent).show();
tr.addClass('shown');
});
}
});
function loadAjaxInfoTmpSubTrans(data, callback) {
$.ajax({
type: "POST",
contentType: "application/json; charset=utf-8",
url: "Query.asmx/FilltmpSubTransData",
data: '{TransID:0,tmpTransID: ' + data + '}',
dataType: "json",
success: function (Result) {
//ContractID = data.ContractId;
//PeriodStartDate = data.ImportDate;
//Deleted = data.ContractStatusId;
callback(formatTmpSubTrans(Result.d));
},
error: function (Result) {
}
});
}
function formatTmpSubTrans(result) {
// `d` is the original data object for the row
var rows = " <thead><tr><th> رقم الحساب </th>" +
"<th>اسم الحساب </th> <th> رقم السند </th> " +
"<th> الوصف </th> " +
"<th> المدين </th> <th> الدائن </th> " +
"<th>العملة </th> <th> معامل التحويل </th> " +
"<th>مدين محلي </th> <th> دائن محلي </th> " +
"</tr> </thead> <tbody>";
if (lang == 'en-US')
rows = " <thead><tr><th> Account No </th>" +
"<th>Account Name </th> <th> Doc. No. </th> " +
"<th> Discription </th> " +
"<th> Debit </th> <th> Credit </th> " +
"<th>Currency </th> <th> Extchange Rate </th> " +
"<th> Local Debit </th> <th> Local Credit </th> " +
"</tr> </thead> <tbody>";
var debit = 0;
var credit = 0;
for (i = 0; i < result.length; ++i) {
debit = parseFloat(debit) + parseFloat(result[i].Local_Debit);
credit = parseFloat(credit) + parseFloat(result[i].Local_Credit);
rows += '<tr style="height:40px">' +
'<td>' + result[i].Account_No + '</td>' +
'<td>' + result[i].AccountName + '</td>' +
'<td>' + result[i].Doc_No + '</td>' +
'<td>' + result[i].Notes + '</td>' +
'<td>' + result[i].Debit + '</td>' +
'<td>' + result[i].Credit + '</td>' +
'<td>' + result[i].CurrencyName + '</td>' +
'<td>' + result[i].Echange_Rate + '</td>' +
'<td>' + result[i].Local_Debit + '</td>' +
'<td>' + result[i].Local_Credit + '</td>' +
'</tr>';
}
var color;
var diff = parseFloat(debit) - parseFloat(credit);
if (debit == credit)
color = '#45f939';
else
color = 'rgba(241, 70, 4, 0.44)';
return '<div class="datagrid"><table id="DetTable" style="width:100%" cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">' +
rows
+ '<tr><td> </td><td></td><td></td><td></td>' +
'<td> </td><td> </td><td></td><td></td>' +
'<td>' + debit + '</td>' +
'<td>' + credit + ' </td></tr>'
+ '<tr style="background-color:' + color + '"><td> </td><td></td><td></td><td></td>' +
'<td> </td><td> </td><td></td><td></td>' +
'<td> الفرق</td>' +
'<td>' + diff + ' </td></tr>'
+ ' </tbody></table></div>';
}