Show record detail in tabs on different tables
Show record detail in tabs on different tables
jmrichardson
Posts: 1Questions: 0Answers: 0
Hello, First, I agree with everyone else that this plugin is AWESOME!
I am having an issue though I am hoping someone can help with. I have 5 tabs, and each is using a different table. I want to hide/show details for each record. I have been following the examples and have it working on the first tab. However, when I click the other tabs it doesn't work. I think it is trying to show/hide on the first tab and not the other tabs.
Here is my code to initiate and then show and hide:
[code]
oTable = $('.dataTable').dataTable({
"bJQueryUI" : true,
"bAutoWidth" : false,
"aaSorting" : [[1, "desc"]],
"bStateSave" : true,
"aoColumnDefs" : [{
"bSortable" : false,
"aTargets" : [0]
}],
"iDisplayLength" : 25,
"aLengthMenu" : [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"sPaginationType" : "full_numbers"
});
$('tbody td img').click(function() {
var nTr = $(this).parents('tr')[0];
if (oTable.fnIsOpen(nTr)) {
this.src = "https://dl.dropbox.com/u/415842/sociallender/images/details_open.png";
oTable.fnClose(nTr);
} else {
this.src = "https://dl.dropbox.com/u/415842/sociallender/images/details_close.png";
oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
}
});
[/code]
And here is format code:
[code]
function fnFormatDetails(oTable, nTr) {
var aData = oTable.fnGetData(nTr);
var sOut = '';
sOut += '';
sOut += 'Loan Purpose:' + aData[9] + 'Loan Amount:' + aData[5] + '';
sOut += '';
sOut += '';
return sOut;
}
[/code]
I dont have a public URL yet. Can someone help?
Thanks John
I am having an issue though I am hoping someone can help with. I have 5 tabs, and each is using a different table. I want to hide/show details for each record. I have been following the examples and have it working on the first tab. However, when I click the other tabs it doesn't work. I think it is trying to show/hide on the first tab and not the other tabs.
Here is my code to initiate and then show and hide:
[code]
oTable = $('.dataTable').dataTable({
"bJQueryUI" : true,
"bAutoWidth" : false,
"aaSorting" : [[1, "desc"]],
"bStateSave" : true,
"aoColumnDefs" : [{
"bSortable" : false,
"aTargets" : [0]
}],
"iDisplayLength" : 25,
"aLengthMenu" : [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
"sPaginationType" : "full_numbers"
});
$('tbody td img').click(function() {
var nTr = $(this).parents('tr')[0];
if (oTable.fnIsOpen(nTr)) {
this.src = "https://dl.dropbox.com/u/415842/sociallender/images/details_open.png";
oTable.fnClose(nTr);
} else {
this.src = "https://dl.dropbox.com/u/415842/sociallender/images/details_close.png";
oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
}
});
[/code]
And here is format code:
[code]
function fnFormatDetails(oTable, nTr) {
var aData = oTable.fnGetData(nTr);
var sOut = '';
sOut += '';
sOut += 'Loan Purpose:' + aData[9] + 'Loan Amount:' + aData[5] + '';
sOut += '';
sOut += '';
return sOut;
}
[/code]
I dont have a public URL yet. Can someone help?
Thanks John
This discussion has been closed.