使用:-DataTables 1.10.12； ASP.NET;
您好!
这个工具很棒!自从我发现它以来，我一直很享受。
我在使用子行时遇到了一些困难。请。指导我。如果有人可以分享他们的解决方案，我们将不胜感激。
我的问题:显示更改数据集的子行:
一直报错
ctx[0].aoData[this[0]] is undefined
当我在更改数据源后尝试获取子行时。通过传递参数单击按钮后获取新数据源。初始加载数据证明没有问题，但随后的数据加载会出现错误。一旦调试器命中以下代码，错误就会传递:
if (row.child.isShown()) {}
下面是我的全部代码:
function organization_GetAccountManagerDetailEarnings(purl, pstart, pend, pcontext, purl2) {
var table;
var existing_table = $('#accountManagerEarningsDataTable').dataTable();
if (existing_table != undefined) {
existing_table.fnClearTable();
existing_table.fnDestroy();
}
table = $('#accountManagerEarningsDataTable').DataTable({
ajax: {
url: purl,
dataSrc: "",
data: function (d) {
d.from = pstart;
d.to = pend;
d.context = pcontext;
}
},
searching: false,
processing: true,
paging: false,
columnDefs:
[
{
className: "dt-right",
"targets": [2]
},
{
className: "dt-right",
"targets": [3]
},
{
className: "dt-right",
"targets": [4]
},
{
className: "dt-right",
"targets": [5]
},
{
className: "dt-right",
"targets": [6]
}
],
columns: [
{
"className": 'details-control',
"orderable": false,
"data": null,
"defaultContent": ''
},
{ "data": "AccountManagerName" },
{ "data": "TradeCount" },
{ "data": "SelfServiceTradeCount" },
{ "data": "TotalDirectBrokerageValue" },
{ "data": "TotalSelfServiceBrokerageValue" },
{ "data": "TotalRetailBrokerageValue" }
],
"order": [[4, 'desc']],
"footerCallback": function (row, data, start, end, display) {
var api = this.api(),
data;
// Remove the formatting to get integer data for summation
var intVal = function (i) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '') * 1 :
typeof i === 'number' ?
i : 0;
};
// Total over all pages
total = api
.column(4)
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);
// Total over this page
pageTotal = api
.column(4, {
page: 'current'
})
.data()
.reduce(function (a, b) {
return intVal(a) + intVal(b);
}, 0);
// Update footer
$(api.column(4).footer()).html(
'LKR' + currencyFormat(pageTotal) + ' ( LKR' + currencyFormat(total) + ' total)');
}
});
$('#accountManagerEarningsDataTable tbody').on('click', 'td.details-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
try {
if (row.child.isShown()) {
// This row is already open - close it
row.child.hide();
tr.removeClass('shown');
}
else {
$('div#collapseAccountManagerEarningsBody').block({
message: '<label>Processing</label>',
css: { border: '3px solid #a00' }
});
// Open this row
var arrForTable1 = [];
var arrForTable2 = [];
totalBrokerage = 0;
totalRetailBrokerage = 0;
totalSelfServiceBrokerage = 0;
console.log('You selected: ' + row.data().AccountManagerID);
//problems with asynchoronus call back
var response = organization_GetAccountManagerDetailEarningsAccountData(row.data(), purl2, pcontext);
if (response.success === "true") {
for (var i = 0; i < response.value.length; i++) {
for (var j = 0; j < response.value[i].Securities.length; j++) {
var itemRow2 = {};
itemRow2["Security ID"] = response.value[i].Securities[j].SecurityId;
itemRow2["Trades"] = response.value[i].Securities[j].Trades;
itemRow2["Buy Qty"] = response.value[i].Securities[j].BuyQuantity;
itemRow2["Sell Qty"] = response.value[i].Securities[j].SellQuantity;
itemRow2["Total Brkg"] = response.value[i].Securities[j].Effective_Brokerage;
itemRow2["Online Brkg"] = response.value[i].Securities[j].Online_Brokerage;
arrForTable2.push(itemRow2);
totalBrokerage = totalBrokerage + parseFloat(response.value[i].Securities[j].Effective_Brokerage);
totalSelfServiceBrokerage = totalSelfServiceBrokerage + parseFloat(response.value[i].Securities[j].Online_Brokerage);
}
totalBrokerage = Math.round(totalBrokerage * 100) / 100;
totalSelfServiceBrokerage = Math.round(totalSelfServiceBrokerage * 100) / 100;
totalRetailBrokerage = Math.round(totalRetailBrokerage * 100) / 100;
var itemRow1 = {};
itemRow1["Account ID"] = response.value[i].AccountId;
itemRow1["Account Name"] = response.value[i].AccountName;
itemRow1["..."] = '<div class="alert alert-info" role="alert">' + buildHtmlTable(arrForTable2, 'table2x' + j) + '<p>Total Brokerage ' + numberWithCommas(totalBrokerage) + '</p></div>';
arrForTable1.push(itemRow1);
arrForTable2 = [];
totalBrokerage = 0;
totalRetailBrokerage = 0;
totalSelfServiceBrokerage = 0;
}
htmlTable1 = buildHtmlTable(arrForTable1, 'table1x' + i);
//console.log("2. " + JSON.stringify(htmlTable1));
row.child(htmlTable1).show();
tr.addClass('shown');
}
else {
row.child('<table><tr><td>' + response.value[0].AccountId + '</td></tr></table>').show();
tr.addClass('shown');
};
$('div#collapseAccountManagerEarningsBody').unblock();
}
} catch (e) {
console.log(e.message);
$('div#collapseAccountManagerEarningsBody').unblock();
}
});
}
function organization_GetAccountManagerDetailEarningsAccountData(d, purl2, context) {
var result = null;
$.ajax({
url: purl2,
data: { "pAccountManagerId": d.AccountManagerID, "pFromDate": d.StartDate, "pToDate": d.EndDate, "pContext": context },
dataType: 'json',
contentType: 'application/json',
async: false,
cache: false,
success: function (data) {
result = data;
}
});
return result;
}
HTML:
<div class="collapse" id="collapseAccountManagerEarnings">
<div class="well">
<div id="collapseAccountManagerEarningsBody">
<!--<img src="~/Images/loading.gif" />-->
<table id="accountManagerEarningsDataTable">
<thead>
<tr>
<th></th>
<th>A/c Manager</th>
<th>Trades</th>
<th>Self Service Trades</th>
<th>Effective Brokerage</th>
<th>Self Service Brokerage</th>
<th>Retail Brokerage</th>
</tr>
</thead>
<tfoot>
<tr>
<th style="text-align:right" colspan="5">Total:</th>
<th></th>
</tr>
</tfoot>
<tbody></tbody>
</table>
</div>
</div>
</div>
最佳答案
我本来想把它写成评论，但我没有足够的声誉。所以……
在我看来，您的 jQuery 选择器 $('#accountManagerEarningsDataTable tbody')更改数据源后可能不存在。您是否 100% 确定表格是使用 <tbody> 呈现的？数据源更改时的元素？我注意到您的示例 HTML 没有 <tbody> #accountManagerEearningsDataTable 中的元素所以选择器将是未定义的。
关于javascript - 在更改数据源时显示子行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39598862/