Show and Hide row details is not getting applied to all rows for a dynamic table

gotrngs

Hi Guys,
I am trying to create a dynamic table but not successful in getting show/hide row details to work using datatables. I got it working only for the first 10 records on the page but when I click next, records on next page are missing this feature. Any help really appreciated.. Below is the code which is same as the sample code from DataTable examples:



CMS Search Page

@import "Styles/demo_page.css";
@import "Styles/demo_table.css";




var oTable;
/* Data set - can contain whatever information you want */
var aDataSet = [
['Trident', 'Internet Explorer 4.0', 'Win 95+', '4', 'X'],
['Trident', 'Internet Explorer 5.0', 'Win 95+', '5', 'C'],
['Trident', 'Internet Explorer 5.5', 'Win 95+', '5.5', 'A'],
['Trident', 'Internet Explorer 6', 'Win 98+', '6', 'A'],
['Trident', 'Internet Explorer 7', 'Win XP SP2+', '7', 'A'],
['Trident', 'AOL browser (AOL desktop)', 'Win XP', '6', 'A'],
['Gecko', 'Firefox 1.0', 'Win 98+ / OSX.2+', '1.7', 'A'],
['Gecko', 'Firefox 1.5', 'Win 98+ / OSX.2+', '1.8', 'A'],
['Gecko', 'Firefox 2.0', 'Win 98+ / OSX.2+', '1.8', 'A'],
['Gecko', 'Epiphany 2.20', 'Gnome', '1.8', 'A'],
['Webkit', 'Safari 1.2', 'OSX.3', '125.5', 'A'],
['Webkit', 'Safari 1.3', 'OSX.3', '312.8', 'A'],
['Webkit', 'Safari 2.0', 'OSX.4+', '419.3', 'A'],
['Webkit', 'Safari 3.0', 'OSX.4+', '522.1', 'A'],
['Presto', 'Opera 9.5', 'Win 88+ / OSX.3+', '-', 'A'],
['Presto', 'Opera for Wii', 'Wii', '-', 'A'],
['Presto', 'Nokia N800', 'N800', '-', 'A'],
['Presto', 'Nintendo DS browser', 'Nintendo DS', '8.5', 'C/A1'],
['KHTML', 'Konqureror 3.1', 'KDE 3.1', '3.1', 'C'],
['KHTML', 'Konqureror 3.3', 'KDE 3.3', '3.3', 'A'],
['KHTML', 'Konqureror 3.5', 'KDE 3.5', '3.5', 'A'],
['Tasman', 'Internet Explorer 4.5', 'Mac OS 8-9', '-', 'X'],
['Tasman', 'Internet Explorer 5.1', 'Mac OS 7.6-9', '1', 'C'],
['Tasman', 'Internet Explorer 5.2', 'Mac OS 8-X', '1', 'C'],
['Misc', 'NetFront 3.1', 'Embedded devices', '-', 'C'],
['Misc', 'NetFront 3.4', 'Embedded devices', '-', 'A'],
['Misc', 'PSP browser', 'PSP', '-', 'C'],
['Other browsers', 'All others', '-', '-', 'U']
];

function fnFormatDetails(oTable, nTr) {
var aData = oTable.fnGetData(nTr);
var sOut = '';
sOut += 'Rendering engine:' + aData[1] + ' ' + aData[4] + '';
sOut += 'Link to source:Could provide a link here';
sOut += 'Extra info:And any further details here (images etc)';
sOut += '';

return sOut;
}

$(document).ready(function () {
$('#dynamic').html('');
oTable = $('#example').dataTable({
"aaData": aDataSet,
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version", "sClass": "center" },
{ "sTitle": "Grade", "sClass": "center" }
],
"aaSorting": [[0, 'asc']]
});

var nCloneTh = document.createElement('th');
var nCloneTd = document.createElement('td');
nCloneTd.innerHTML = '';
nCloneTd.className = "center";

$('#example thead tr').each(function () {
this.insertBefore(nCloneTh, this.childNodes[0]);
});

$('#example tbody tr').each(function () {
this.insertBefore(nCloneTd.cloneNode(true), this.childNodes[0]);
});

$('#example tbody td img').live('click', function () {
var nTr = $(this).parents('tr')[0];
if (oTable.fnIsOpen(nTr)) {
/* This row is already open - close it */
this.src = "Images/details_open.png";
oTable.fnClose(nTr);
}
else {
/* Open this row */
this.src = "Images/details_close.png";
oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), 'details');
}
});
});





CMS Search Page


Search Fields

Search Results