Use Tabs for row grouping?

AnaRita

Is there a way to use tabs for the same function as the row grouping example:
http://www.datatables.net/release-datatables/examples/advanced_init/row_grouping.html
Like: tab1 and tab2 with filtered subtable and hidden column.
Thank you.

dnagirl

I think what you'd have to do is create a tab structure where each of the tabs calls a table filter function. JQuery-UI tabs would likely work.

Then you might apply a filter to the data via dataTables.fnFilter('mygroup', colnum) and cause the table to be displayed in the appropriate div. On each tab change, you'd need to clear all the filters and apply the correct one.

That would be my approach, anyway.

AnaRita

Thank you! I'll try it and then post it here.

matbeard

I'm looking for the same solution, I think.

I've got a server-side table, to which I want to apply filters -- nothing difficult about that. But I'd like to apply the filter by clicking a UI Tab.

This is not the same as having a table in each tab (that's easy) -- it's the same table, but the tabs call a filter function rather than load different content.

I'm almost there, but it throws errors because the content for the 'filter' tabs doesn't exist.

I know this is a UI Tabs question, more than a DataTables question, but I wondered if anyone could help?

allan

Basically you just need to have an event occur on each tab click, and that event will call fnFilter on the table with a suitable filter set. The table itself should be outside the tabs, otherwise obviously the table would be hidden when clicking through the tabs!

So the question is - how do you add an event handlers to the tab buttons? Presumably just a jQuery selector would do?

Allan

matbeard

Hi allan

Turns out the solution was really simple. The dataTable is initially displayed outside of the tabs, as you mentioned, then selecting a tab applies the filter and moves the dataTable into the selected tab's panel.

[code]
$("#tabs").tabs( {
select: function(event, ui) {
oTable.fnFilter(ui.tab.innerHTML,1,false); // apply the table filter based on tab name
$('#dataTable').appendTo(ui.panel); // move the table into the selected tab panel
}
} );
[/code]

Works perfectly.