Datatable within Datatable within Datatable issue
Datatable within Datatable within Datatable issue
I have an issue with rendering multiple datatables within datatables. I have a parent list that will expand to show details of that record. Those details will be of 2 more datatables, one is just a standard table with only sorting and pulling data from another source while the other will be another datatable that also has the ablility to show details of that record, which in turn will be a standard datatable with sorting and populating from a datasource. The user should only have one parent record open at a time. My issue is that when the entire record details tree is expanded and the user switches to expand another record i get either a property cannot be found at '1' or after a certain amount of click of opening records to the last child then switching to another parent the last details table within that parent item will automatically close the details after a user opens it.
This discussion has been closed.
Replies
[code]
function CreateTransactionDatatable(m_DataTable, nTr) {
var transOpen = [];
var oData = m_DataTable.fnGetData(nTr);
var zData = m_DataTable.fnGetPosition(nTr);
var totalrequested = 0;
m_TransactionTable = $('#Tranactionstable').dataTable({
"bProcessing": true,
"bPaginate": false,
"bServerSide": true,
"bLengthChange": false,
"bJQueryUI": true,
"aoColumns": [
{
"mDataProp": null,
"sClass": "control center childtrans",
"sDefaultContent": ''
},
{ "bSortable": false, "sWidth": "50px" },
{ "bVisible": false },
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
null,
],
"sAjaxSource": "<%=SPContext.Current.Web.Url%>/_vti_bin/419WebService.asmx/MainGetTransactionItems",
"fnCreatedRow": function (nRow, aData, iDataIndex) {
return nRow;
},
"fnDrawCallback": function () { totalrequested = 0; },
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"type": "post",
"dataType": "json",
"contentType": "application/json",
"url": sSource,
"data": ConvertAmendmentToJSON(aoData, oData[1]),
"success": function (msg) {
var json = $.parseJSON(msg.d);
fnCallback(json);
},
"error": function (o) {
alert('error in callback, you might want to replace this with debugger');
}
});
}
});
m_TransactionTable.fnDraw();
$('#Tranactionstable td.childtrans').live('click', function () {
var nTr = this.parentNode;
var i = $.inArray(nTr, transOpen);
$(transOpen).each(function () {
if (this !== nTr) {
$('td.childtrans', this).click();
m_TransactionTable.fnClose(this);
}
});
if (i === -1) {
var nMoreDetailsRow = m_TransactionTable.fnOpen(nTr, TransactionDetails(m_TransactionTable, nTr), 'details');
$('div.innerDetails2', nMoreDetailsRow).slideDown();
transOpen.push(nTr);
CreateTransactionAmendmentsdataTable(m_TransactionTable, nTr);
//TransactionAmendmentCurrentOpenParentRow = $("#innerDetails2").closest('tr');
$('img', this).attr('src', sImageUrl + "details_close.png");
}
else {
$('img', this).attr('src', sImageUrl + "details_open.png");
$('div.innerDetails2', $(nTr).next()[0]).slideUp(function () {
m_TransactionTable.fnClose(nTr);
transOpen.splice(i, 1);
});
}
});
$("#Tranactionstable th").css({ 'width': '' });
}
function CreateTransactionAmendmentsdataTable(m_TransactionTable, nTr) {
var oData = m_TransactionTable.fnGetData(nTr);
m_TransactionAmendmentsDataTable = $('#transactionAmendments').dataTable({
"bProcessing": true,
"bServerSide": true,
"bAutoWidth": false,
"bJQueryUI": true,
"bPaginate": false,
"bLengthChange": false,
"aoColumns": [
{ "bSortable": false, "sWidth": "20px" },
{ "bVisible": false },
null,
null,
null,
{ "bVisible": false }
],
"sAjaxSource": "<%=SPContext.Current.Web.Url%>/_vti_bin/419WebService.asmx/GetMainAmendmentItems",
"fnServerData": function (sSource, aoData, fnCallback) {
$.ajax({
"type": "post",
"dataType": "json",
"contentType": "application/json",
"url": sSource,
"data": ConvertAmendmentToJSON(aoData, oData[1]),
"success": function (msg) {
var json = $.parseJSON(msg.d);
fnCallback(json);
},
"error": function (o) {
alert('error in callback, you might want to replace this with debugger');
}
});
}
});
m_TransactionAmendmentsDataTable.fnDraw();
}
function TransactionDetails(m_TransactionTable, nTr) {
var oData = m_TransactionTable.fnGetData(nTr);
var sOut = '' +
'
Amendments' +
' Edit' +
'Amendment ID' +
'Title' +
'Request' +
'Notes' +
'Parent ID' +
' New Amendment
' +
'';
return sOut;
}
[/code]