Search jQuery

jQuery Forum

UI Tabs -- use same content on each tab

in Using jQuery UI • 3 months ago

I'm currently displaying a table (using the DataTables plugin) which pulls data from the server-side. No problems so far.

I'd like to use UI Tabs to apply filters to the existing table rather than displaying entirely different content.

I've kind of got it working, but it throws errors (because there is no content for the 'filter' tabs) and the clicked tabs don't become 'selected'.

Can anybody help?

Replies(2)

kbwood.au

Re: UI Tabs -- use same content on each tab

3 months ago

You could have empty tabs and then display the data table below them, possible styling it to appear as part of the tab control. Respond to the select event to note which tab is chosen.

matbeard7

Re: UI Tabs -- use same content on each tab

3 months ago

Brilliant... now why didn't I think of that.

The solution is really simple:

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

Selecting a tab applies the table filter and then moves the entire table into the selected tab's panel.

Thanks for the heads-up.

Top Reply

Response title

Attachments

jQuery Forum

UI Tabs -- use same content on each tab

Replies(2)

Re: UI Tabs -- use same content on each tab

Re: UI Tabs -- use same content on each tab

Statistics

Tags

Actions

Related Posts