在更改数据源时显示子行
Posted
技术标签:
【中文标题】在更改数据源时显示子行【英文标题】：Showing Child Row on Changing Datasource 【发布时间】：2017-01-28 15:50:04 【问题描述】：使用：-DataTables 1.10.12； ASP.NET；
您好！
这个工具很棒！自从我找到它以来，我一直很享受它。
我在使用 Child Rows 时遇到了一些困难。请。指导我。感谢是否有人可以分享他们的解决方案。
我的问题：在不断变化的数据集上显示子行：
我遇到了错误
ctx[0].aoData[this[0]] 未定义
当我在更改数据源后尝试获取子行时。单击按钮后通过传递参数获取新数据源。数据的初始加载证明没有问题，但随后的数据加载给出了错误。只要调试器遇到以下代码，就会传递错误：
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>
【问题讨论】：
这发生在 mozilla 而不是在 chrome 中 【参考方案1】：我会写这篇评论，但我没有足够的声誉。所以...
在我看来，在您更改数据源后，您的 jQuery 选择器 $('#accountManagerEarningsDataTable tbody') 可能不存在。您是否 100% 确定在更改数据源时使用 <tbody> 元素呈现表格？我注意到您的示例 HTML 在 #accountManagerEearningsDataTable 中没有 <tbody> 元素，因此选择器将未定义。
【讨论】：
感谢您抽出宝贵的时间来帮助我。我在 #accountManagerEarningsDataTable 中有<tbody> 标记我不知道在数据源更改后<tbody> 是否消失了，我可能必须在调试浏览器后恢复。以上是关于在更改数据源时显示子行的主要内容，如果未能解决你的问题，请参考以下文章