[solved] Show/Hide Details Question?
[solved] Show/Hide Details Question?
I have a html markup table (not server side processed) that I want to use with Show/Hide details, similar to this http://datatables.net/release-datatables/examples/server_side/row_details.html
My question is it possible to configure this, say having a lead row and then the next 4 (or however many) be the Hidden Details automatically?
My structure would be such that I could keep the same amount of rows past the main row on each subsequent entry, or could I add a "class" to the hidden details rows?
Any help would be appreciated?
Thanks.
Ps: I'm not in front of my development machine, but I think I have 1.7.5 currently installed (being used elsewhere) on the site.
My question is it possible to configure this, say having a lead row and then the next 4 (or however many) be the Hidden Details automatically?
My structure would be such that I could keep the same amount of rows past the main row on each subsequent entry, or could I add a "class" to the hidden details rows?
Any help would be appreciated?
Thanks.
Ps: I'm not in front of my development machine, but I think I have 1.7.5 currently installed (being used elsewhere) on the site.
This discussion has been closed.
Replies
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DataTables example
@import "DataTables-1.7.5/media/css/demo_page.css";
@import "DataTables-1.7.5/media/css/demo_table.css";
/* Formating function for row details */
function fnFormatDetails ( oTable, nTr )
{
var aData = oTable.fnGetData( nTr );
var sOut = '';
sOut += 'Paid Membership:'+aData[3]+'';
sOut += 'Address:'+aData[4]+'';
sOut += 'Status:'+aData[5]+'';
sOut += '';
return sOut;
}
$(document).ready(function() {
/*
* Insert a 'details' column to the table
*/
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] );
} );
/*
* Initialse DataTables, with no sorting on the 'details' column
*/
var oTable = $('#example').dataTable( {
"aoColumnDefs": [
{ "bSortable": false, "aTargets": [ 0 ] },
{ "bVisible": true, "aTargets": [ 1 ] },
{ "bVisible": true, "aTargets": [ 2 ] },
{ "bVisible": false, "aTargets": [ 3 ] },
{ "bVisible": false, "aTargets": [ 4 ] },
{ "bVisible": false, "aTargets": [ 5 ] }
],
"aaSorting": [[1, 'asc']]
});
/* Add event listener for opening and closing details
* Note that the indicator for showing which row is open is not controlled by DataTables,
* rather it is done here
*/
$('#example tbody td img').live('click', function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('details_close') )
{
/* This row is already open - close it */
this.src = "../examples_support/details_open.png";
oTable.fnClose( nTr );
}
else
{
/* Open this row */
this.src = "../examples_support/details_close.png";
oTable.fnOpen( nTr, fnFormatDetails(oTable, nTr), 'details' );
}
} );
} );
Full Name
Username
Paid Membership
Address
Status
Trident
AOL browser (AOL desktop)
Win 98+ / OSX.2+
3
A
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
DataTables © Allan Jardine 2008-2010
[/code]