Init datatables on nested tables with fnIsOpen

studioleland

Hey Alan,

I find that when I put a second init of datatables for the nested table container I don't see the datatables script applied to the nested tables. Is this due to the fact that the nested tables are not present when the page js loads? How can I get around this?

button is clicked to show nested table:

[code]
$('#example1 tbody tr td.attendees a').click( function () {
if ( oTable.fnIsOpen( this.parentNode.parentNode ) ) {
oTable.fnClose( this.parentNode.parentNode );
// change value of text in button to be "show"
} else {

oTable.fnOpen(

this.parentNode.parentNode,
[/code]

nested table init:

[code]
$('.info_row .attendee-table').dataTable( {

'sDom': '<\"events-filters\"f><\"clear\">rtli',

'bSort': true,

'bPaginate': false,

"sScrollX": "100%",

"sScrollXInner": "110%",

"bScrollCollapse": true
});
[/code]

Ultimately I would like to load all the nested tables immediately so I can search on them using the parent table search box. Please use my remaining credits to assist with this.

allan

Is this on the same page as you linked to in your previous thread? I don't see the nested table being initialised at all there.

In the page you linked to before, the nested table doesn't exist until the row is 'opened' - so you'd need to either open all rows immediately on load (which would be resolve intensive, particularly since you have scrolling enabled), or you'd need to apply the filtering on-the-fly and each row is opened.

The fnFilterAll plug-in will be useful for this sort of thing: http://datatables.net/plug-ins/api#fnFilterAll . You'd unbind the parent table's search, and bind a custom key up which will call fnFilterAll .

However, I'm not sure I fully understand how this should work. Keep in mind here, that the parent tables and the child tables are 100% independent. They can make linked using fnFilterAll, or otherwise making the same API calls to the same tables, but I'd like to understand what your goal is here. Is it that when you start typing into the search, it will filter by name on both the parent table and the child tables? As the search becomes more refined, child rows will be dropped off, until he point when even the parent row needs to be removed?

If that is the case, the name information will need to be in the parent table as well - as I say, they are 100% independent - the parent table can't know if a child table has results or not.

Allan

studioleland

You can see the update to the demo table now.

I would love to be able to use the nested table to show associated attendee tables that would also be searchable from the top level search box. It looks like we are going to be doing Ajax loading of attendee tables for the nested tables. How do I then init a second datatables js for the nested table so it will be searchable from top search bar and scrollable, etc.

allan

> I would love to be able to use the nested table to show associated attendee tables that would also be searchable from the top level search box

The fnFilterAll option will be the way to go with the current API (DataTables 1.10 will be introducing a new API to make it easier - but its not ready yet I'm afraid...).

The way fnFilterAll works is to apply filtering to all tables. So your 'Search keyword' input might be something like:

[code]
$("#example1_filter input").keyup( function () {
table.fnFilterAll(this.value);
} );
[/code]

Possibly it should be a static function that plug-in thinking about it, but here `table` is just a reference to one of the DataTables on the page (the parent table would make sense).

Then the filtering into it applied to all tables equally. So if you want name based filtering on the parent table, as I mentioned above, you must add the names (and any other searchable information you want) into the parent table (probably as a hidden column). That will allow the filtering to work not he parent table.

For the child tables (which aren't currently DataTables), you'd need to initialise them as DataTables, which you can do immediately after you call fnOpen, and you'd want the filtering that is already applied to the parent table to apply also to the child table - something like:

[code]
var tr = oTable.fnOpen(
this.parentNode.parentNode,
" ... ",
"info_row"
);

$('table', tr).dataTable( {
sDom: "t",
bPaginate: false,
bInfo: false,
oSearch: {
sSearch: $("#example1_filter input").val()
}
} );
[/code]

Note that for the child table, I've set sDom to just `t` - that's so DataTables will only draw the table itself - i.e. you don't want it to draw its own filtering input etc.

It might require some additional styling of course, but that's how I think I would approach the integration to link the filtering of the parent and child tables.

Its a smart looking table btw :-)

Regards,
Allan