Hide / Show details for a row
Hide / Show details for a row
Hi Allan,
I looked at your example code to toggle a details "panel" for each row in the table. The example shows how to take data from cells in the current row and display them in the "panel". Is it possible to have "child rows" of each datatable row that can be toggled like your "panel"?
I was hoping that I'd be able to do something like give the "child rows" a class of say, "toggle", and then have the datatable's new feature simply display or hide those child rows. Is this possible?
Thanks for your continued support for a fantastic plugin.
I looked at your example code to toggle a details "panel" for each row in the table. The example shows how to take data from cells in the current row and display them in the "panel". Is it possible to have "child rows" of each datatable row that can be toggled like your "panel"?
I was hoping that I'd be able to do something like give the "child rows" a class of say, "toggle", and then have the datatable's new feature simply display or hide those child rows. Is this possible?
Thanks for your continued support for a fantastic plugin.
This discussion has been closed.
Replies
What you are looking for isn't directly implemented at the moment, also it is perhaps possible with a little bit of API work. What you could do is, before you initialise the DataTable, pull out every second row (the details row) and store that in a Javascript array somewhere. Then add the show/hide column like in my demo, and finally the event handlers, which is where you can pull the data from your stored details array and insert it into the table :-)
Hopefully this will do what you are looking for.
Regards,
Allan
The issue I'm having now is that if my table contains a footer (to display totals for some columns), the footer is not lined up correctly with the information above it, i.e., the columns in the header and body look fine but the footer is "off" by one column to the left.
I've figured out that I should insert a in the footer row too so I extended the sample code by inserting the following lines immediately following the ones to deal with the tbody:
[code]
$('#dtMyTable tfoot tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
[/code]
This fixed the table footer so that it aligns correctly with the tbody but now the table header is "off" in that it is now one column shifted to the left. If I examine the resulting HTML for the datatable, I can see that the header did not get a added to it (although there is javascript to do that present).
I'm not sure if I've explained myself clearly but what appears to be something simple to fix is turning out to be a real chore. Any help, suggestions and/or hints would be greatly appreciated.
Allan
The following is modified HTML taken from your Detail Row example:
As you'll see, all is good EXCEPT the header row is off by one column to the left. Why?
[code]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
DataTables example
@import "./demo_page.css";
@import "./demo_table.css";
var oTable;
/* Formating function for row details */
function fnFormatDetails ( 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() {
/*
* 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] );
} );
/* My modification to include the footer row */
$('#example tfoot tr').each( function () {
this.insertBefore( nCloneTh, this.childNodes[0] );
} );
/*
* Initialse DataTables, with no sorting on the 'details' column
*/
oTable = $('#example').dataTable( {
"aoColumns": [
{ "bSortable": false },
null, null, null, null, null
],
"aaSorting": [[1, 'asc']]
/* My modification to add a footer calculation*/
,
"fnFooterCallback": function( nRow, aaData, iStart, iEnd, aiDisplay ) {
/*
* Calculate the total market share for all browsers in this table (ie inc. outside
* the pagination)
*/
var iTotal = 0
for ( var i=0 ; i
I'll not update my example code, because its not needed there - but a good one to have documented in the forum.
Regards,
Allan
THANK YOU!!
That "simple" clone command slipped by my jquery noob eyes, but, it was the vital step. I hope my ignorance has helped others who may encounter the same issue.
Regards,
Mike
I'm up against one more issue with detail rows. When I implement the detail row using your sample code, the row is added but it shows up too narrow and does not occupy the full width of my table. I can see that the detail row is using a colSpan, however, the value for the colSpan seems to be one column short. For example, my table has six columns (with the first one being a hidden column) and the resulting HTML for the detail row is:
[code]
[/code]
I believe that the colSpan should be 6. I've looked thru the documentation and css and I cannot see a setting that would affect the colSpan of the detail row. What am I missing here?
Thanks,
Mike
Allan
I'm struggling once again with the detail row. This time I'm receiving the error "DataTables warning: Added data does not match known number of columns". The thing is, if I define the data in the it works as expected. However, if I use "sAjaxSource": 'C:/test.txt', it doesn't. Here's the HTML that works:
[code]
@import "./css/demo_page.css";
@import "./css/demo_table.css";
var oTable;
function fnFormatDetails ( nTr )
{
return "";
}
$(document).ready(function() {
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 tfoot tr').each( function () {
this.insertBefore( nCloneTh.cloneNode( true ), this.childNodes[0] );
} );
oTable = $('#example').dataTable( {
"aoColumns": [
{ "bSortable": false }
, {"bVisible": false}
, null
, null
, null
, null ]
,"aaSorting": [[1, 'asc']]
/* ,"sAjaxSource": 'C:/test.txt' */
,"fnFooterCallback": function( nRow, aaData, iStart, iEnd, aiDisplay ) {
var iTotal = 0
var iTotal2 = 0
for ( var i=0 ; i
Allan
Yes I know about there being 6 columns in aoColumn and only 5 in the HTML and Ajax data - but that's exactly what your sample shows too and it works for that!!!
Mind you your example uses the HTML route and it is working fine if I use HTML too. The problem is when JSON is tried. Something weird is happening with the Ajax.
Mike
As I've mentioned, Allan's sample detail row (http://www.datatables.net/examples/api/row_details.html) uses HTML to define 5 columns and then aoColumns specifies 6 (examine the page source)! That works.
If I try the same using a sAjaxSource instead of defining the data in HTML it fails. Why?
I'm only trying to extend that sample (detail row) to include a footer showing totals while using sAjaxSource. Has anyone ever got this working?
Mike
S
I think what I'm asking is fairly straight forward. Can anyone modify the sample "detail row" example work so that it includes a footer (using fnFooterCallback) and sAjaxSource?
I've successfully done a standard datatable doing a footer and sAjaxSource but can't make the "detail row" work this way.
Any assistance is greatly appreciated.
Mike
S
If you read them (like I would hope anyone would who tries to help), you will see that the code sample that I've posted above on March 20, 2010 gives everything needed for a "stand alone example" demonstrating my issue. I've even pointed out what line of code to change to make it fail. Did you not see that?
I don't know what else I could do to make it any simpler. It can run off of your local hard drive with the proper folders that I'm certain most here can setup.
Once again, I appreciate your efforts to assist (if you can).
Mike
I don't want to get into a pi$$ing match here, but, for a guy who just joined this forum two days ago you sure pack a lot of attitude for a noob. 7 comments to date with one being "Good Luck" :)
At the risk of getting banned from this forum I must tell you that the lack of content in your last post indicates to me that you didn't actually read and understand the issue that I am trying to demonstrate in the sample code that I'd posted. I could have made it more verbose but if you had any knowledge of this forum, you'd know that there is a limit to the amount of text that one can enter.
If "Good luck" is all that you can offer then don't bother replying to posts. You are not being constructive here and you're only bloating this thread.
Thanks for understanding.
Mike
No, I just find that your belligerent attitude deserves no more than a "good luck", if that.
S