Hidden row details as new dynamic datatable

kellyjandrews

I'm looking to implement additional row info, and would like to dynamically populate the info as a new datatable.

Can you point me in the direction of how to begin this process, if it's at all possible?

allan

Hi kellyjandrews,

So something like this http://datatables.net/examples/api/row_details.html - but with a new DataTable inside it? Or outside? Either way, have a look at that example and some of the others, and you'll be able to see how you can get information about a specific row, and from there you are initialise a new table with your new information.

Hope this helps,
Allan

kellyjandrews

Ok -

So use this to create the table on the fly then -
[code]
"aoColumns": [
{ "sTitle": "Engine" },
{ "sTitle": "Browser" },
{ "sTitle": "Platform" },
{ "sTitle": "Version", "sClass": "center" },
{
"sTitle": "Grade",
"sClass": "center",
"fnRender": function(obj) {
var sReturn = obj.aData[ obj.iDataColumn ];
if ( sReturn == "A" ) {
sReturn = "A";
}
return sReturn;
}
}
]
[/code]

Use this to show the row data http://datatables.net/examples/api/row_details.html and drop the datatable call into the fnFormatDetails function - correct?

Then use this http://datatables.net/examples/server_side/server_side.html to bring in the data needed.

Does that seem correct?

allan

Hi,

Sounds okay, although you might want to look at this demo ( http://datatables.net/examples/server_side/row_details.html ) if you are wanted to show and hide records when using server-side processing. You might need to customise the Javascript somewhat as well :-)

Regards,
Allan

kellyjandrews

First off - thank you for everything - I really appreciate your help.

Second - checked out page you suggested, and seem to be a bit stumped.

[code]
var oTable

function fnFormatDetails ( nTr )
{
var iIndex = oTable.fnGetPosition( nTr );
var aData = oTable.fnSettings().aoData[iIndex]._aData;

var sOut = 'Child Info Goes Here';

return sOut;
}


function fnOpenClose ( oSettings )
{
$('td img', oTable.fnGetNodes() ).each( function () {
$(this).click( function () {
var nTr = this.parentNode.parentNode;
if ( this.src.match('/images/common/exp.gif') )
{
/* This row is already open - close it */
this.src = "/images/common/col.gif";
/* fnClose doesn't do anything for server-side processing - do it ourselves :-) */
var nRemove = $(nTr).next()[0];
nRemove.parentNode.removeChild( nRemove );
}
else
{
/* Open this row */
this.src = "/images/common/exp.gif";
oTable.fnOpen( nTr, fnFormatDetails(nTr), 'details' );
}
} );
} );
}

$(function(){

oTable = $('#grid1').dataTable( {
"bProcessing": true,
"bPaginate": true,
"sPaginationType": "full_numbers",
"sAjaxSource": "http://myurl.com/processor",
"bAutoWidth" : false,
"asStripClasses" :['Row', 'RowAlternate'],
"sDom": '<"page-content" lft><"grid-footer"ipr>',
"aoColumns": [
/* Row Details */ { "bSortable": false },
/* CheckBox */ { "bSortable": false },
/* Name */ null,
/* GID */ null,
/* Created on */ null,
/* Title */ { "bVisible": false},
/* Tags */ { "bVisible": false}
],
"fnDrawCallback": fnOpenClose

});
});
[/code]

Seems pretty straightforward, and seems to match your code - but it errors on the fnOpenClose - it says oTable does not exist. What am I missing?

allan

What's your reason for wrapping the DataTables initialiser in "$(function(){});", but not the rest of the stuff? I think you've got a scoping issue there... :-)

Regards,
Allan

kellyjandrews

I would have thought so too - but your example shows the variable and fnOpenClose above the $(function(){}); call.

See here: http://datatables.net/examples/server_side/row_details.html.

Is your example not correct?

allan

My example shows it above "$(document).ready(function() {} )". Is "$(function(){});" the same?! I wouldn't have thought so....

Allan

kellyjandrews

"$(document).ready(function() {} )" and "$(function(){});" are indeed interchangeable. Just to be sure, I added the code into my page, and it gave me the same result of oTable is undefined.

There must be something I'm missing or doing wrong - I just can't see it.

allan

Hello,

I think I might have an idea as to what is happening. The draw callback function is referencing oTable before the initialisation of that object has been completed! (i.e the draw is happening inside the $.dataTable() initialisation). I think this will be what is messing it up.

Due to the way your code is set up, perhaps something as simple as:

[code]
if ( typeof oTable == 'undefined' ) { return; }
[/code]
at the start of the fnOpenClose will do the trick.

Actually it might take a little more work that just that, since you aren't using server-side processing here - which is why my code works, and this doesn't. I think you actually want to do this using fnInitComplete rather than fnDrawCallback. That would also make the above problem "go away".

Regards,
Allan

kellyjandrews

When I woke up this morning - I was thinking it was not completing the initialization before calling the function - and then you confirmed that.

I have another page where I am using the plug-in - with server side processing - and got the two confused as to which method to use - Thank you for helping me figure this out!

cloud

Hi Allan,

First off, great job on the plug-in!!

I am trying to implement the row details function as well, using a table that we dynamically populate through JSON type data. For some reason, the fnGetNodes never returns anything, and I was wondering if it has to do with the way we are populating the table.
I first draw the empty table, and then call a populate function that uses an ajax call to get the data in; the data is a list of lists containing the data for each cell, but no table formatting. The fnFormatDetails is done server-side, by creating that variable with the details info just like in your example (with table formatting) passing that variable into the above ajax call. On complete (of the populate function), I call the fnOpenClose... and nothing happens, not even an error!.. It seems the oTable.getNodes isn't returning anything. The details show up as a regular cell, as soon as the page loads...
Any ideas as to why this happens? I can post the code to give a better idea if necessary.
Thanks and I look forward to hearing from you.

kellyjandrews

Cloud -

Curious what you are doing to try and get the data back - I have not been able to populate the table either.

I have tried putting the table definition in muliple places, and not able to return anything either. I actually think the .datatable() function itself is never getting run - so if you were able to get it to atleast run with no results, maybe we can get each other closer on this one.

allan

Hi cloud,

Are you able to post your code, or provide a link to the page showing the issue?

Thanks,
Allan

kellyjandrews

I was able to get this to work - cloud - if you are still interested - please let me know and I will get the code posted from my working example.

Thanks,
Kelly

jemison

Hi,
this a great plugin. I'm using hidden rows, and it work great, but I'm trying implement <> and <> buttons. and so far no luck, has someone done this already?, thanks in advance.

kellyjandrews

Probably be able to do something like this :
[code]
$('#expandAll').click(function() {
$('.myTable').find('tr').each(fnOpenClose);
[/code]
That's probably not exactly right - post your code and we can have a look and try to figure it out.

Thanks,
Kelly

jemison

okay, Im using code is just like in the example : http://www.datatables.net/examples/api/row_details.html

[code]


var oTable;

/* Formating function for row details */
function fnFormatDetails ( nTr )
{
var iIndex = oTable.fnGetPosition( nTr );
var aData = oTable.fnSettings().aoData[iIndex]._aData;

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() {
...

$("#expandAll").click(function(){
$('#example').find('tr').each(fnOpenClose);
});

} );



- and I have a button like that
Expand all

[/code]
that generate an error : this.fnClose is not a function.
I tried putting :oTable.fnOpen instead, didn't work neither.

kellyjandrews

In the "..." do you declare the fnOpenClose ? Like I said in my prior post, the code I put wasn't exact. I'll have to spend a little bit of time with it to figure it out exactly.

Your basically going to run the fnOpenClose() on every row. You just have to search through the table to find each expand area.

jemison

I got it working like this
[code]
$("#expandAll").click(function(){
$("[src$='details_open.png']").click();
});

kellyjandrews

Almost hate to open this one back up, but here goes.

I have everything working beautifully. I however have a function that calls the fnReloadAjax() plug-in.

Data reloads perfect. But the fnOpenClose goes away. :(

So where would I call that function again to make sure the table maintains that functionality?

Basic code is like so:

[code]
fnDeleteRows {
//do the delete
fnReloadAjax();
}
[/code]

I call the fnOpenClose on the fnInitComplete callback.

allan

Hi kellyjandrews,

fnInitComplete() is only called once during the life time of the table - it will not be called again when you make your call to fnReloadAjax - which might be where the problem lies? You could make the call yourself - the latest version of fnReloadAjax allow you to pass a function which should be called when the operation is complete - would that do the trick for you?

Regards,
Allan