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:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title> CMS Search Page</title>
<style type="text/css" title="currentStyle">
@import "Styles/demo_page.css";
@import "Styles/demo_table.css";
</style>
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript" src="Scripts/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
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/A<sup>1</sup>'],
['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 = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
sOut += '<tr><td>Rendering engine:</td><td>' + aData[1] + ' ' + aData[4] + '</td></tr>';
sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
sOut += '</table>';
return sOut;
}
$(document).ready(function () {
$('#dynamic').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');
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 = '<img src="Images/details_open.png">';
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');
}
});
});
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big" style="text-align:center;">
CMS Search Page
</div>
<h1>Search Fields</h1>
<h1>Search Results</h1>
<div id="dynamic"></div>
<div class="spacer"></div>
</div>
</body>
</html>
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:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title> CMS Search Page</title>
<style type="text/css" title="currentStyle">
@import "Styles/demo_page.css";
@import "Styles/demo_table.css";
</style>
<script type="text/javascript" src="Scripts/jquery.js"></script>
<script type="text/javascript" src="Scripts/jquery.dataTables.js"></script>
<script type="text/javascript" charset="utf-8">
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/A<sup>1</sup>'],
['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 = '<table cellpadding="5" cellspacing="0" border="0" style="padding-left:50px;">';
sOut += '<tr><td>Rendering engine:</td><td>' + aData[1] + ' ' + aData[4] + '</td></tr>';
sOut += '<tr><td>Link to source:</td><td>Could provide a link here</td></tr>';
sOut += '<tr><td>Extra info:</td><td>And any further details here (images etc)</td></tr>';
sOut += '</table>';
return sOut;
}
$(document).ready(function () {
$('#dynamic').html('<table cellpadding="0" cellspacing="0" border="0" class="display" id="example"></table>');
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 = '<img src="Images/details_open.png">';
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');
}
});
});
</script>
</head>
<body id="dt_example">
<div id="container">
<div class="full_width big" style="text-align:center;">
CMS Search Page
</div>
<h1>Search Fields</h1>
<h1>Search Results</h1>
<div id="dynamic"></div>
<div class="spacer"></div>
</div>
</body>
</html>