Replies

• dnagirl Posts: 36Questions: 2Answers: 0

  November 2011

  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 Posts: 2Questions: 0Answers: 0

  November 2011

  Thank you! I'll try it and then post it here.
• matbeard Posts: 22Questions: 0Answers: 0

  February 2012

  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 Posts: 63,161Questions: 1Answers: 10,406 Site admin

  February 2012

  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 Posts: 22Questions: 0Answers: 0

  February 2012 edited February 2012

  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.