Using DataTables within jQueryUI Tabs

mdcook

Thank you for DataTables!!! Using this plugin has been my first in depth experience with javascript and ajax.

I am successfully using datatables within a form with multiple submission buttons each ties to their own ajax requests.

My issue is now I am using the jQuery UI tabs and Datatables together. I have a page load with three tabs and each tab has it own table with two submission buttons.

The table and buttons on the tab that loads when the page loads works great. But, the other two tables are not working.

If I build the tables with the same header
[code]



...build table...










[/code]
Each table on all three tabs will display correctly, but I can only get the first tables submit buttons to work. When I switch a tabs to different a different table the ".serialize" function still refers to the table on the first tab. Each tab is populated from a unique ajax source and has its own js file included at the bottom of the html. I initialize each table in the tabs js file like this
[code]
$(document).ready(function()
{
oTable = $(".dataTable").dataTable(
{
"bAutoWidth": false,
"bFilter": true,
"bSort": true,
"sDom": '<"top"i>rt<"bottom"flp<"clear">'
} );

//submit functions for the table buttons
$(".mySample_button").click( function()
{
//gets what samples were selected
var sData = $("input", oTable.fnGetNodes()).serialize();
...
[/code]


If I try to build the tables with different html ids and use those ids instead of their class to make unique javascript variables for each table they don't display correctly. Also when I do this everytime I switch tabs the page will keep the original datatable_wrapper and make another on inside. So, I get a table within a table within a table....?

I'm sure I am making a novice mistake, but have run out of things to try. Is there a way to clear and initialize the "sData" variable each time I switch tabs?

Thank you again for DataTables and for any help pointing me in the right direction.

allan

Hi mdcook,

Certainly no novice mistake here - it sounds quite complex what you are trying to do! I like it :-)

So you are initialising three tables with your $().dataTable(); call - that's not a problem, but as you can see the default is for DataTables to always use the first table for the API functions. What is happening is that the oTable variable is actually a three element array, so you need to tell DataTables which array element you want to use - this is done by the $.fn.dataTableExt.iApiIndex property of the API (I think this in new in 1.5 - this won't work with 1.4).

Then you can do something like:

[code]
//submit functions for the table buttons
$(".mySample_button").click( function()
{
//gets what samples were selected
$.fn.dataTableExt.iApiIndex = 1; /* select the second table */
var sData = $("input", oTable.fnGetNodes()).serialize();
...
}
[/code]

How does that sound?

Allan

mdcook

Hi Allan

Sounds great! It was as easy as upgrading to 1.5 and adding one line of code to two js files.

Thanks a bunch,

Matthew

andrey

Hello Allan!
Thanks a lot for that wonderful plugin.
I'm using DataTables with jQueryUI Tabs inn ajax mode:

[code]


Lab1
Lab2
Lab3
Lab4


[/code]

But I have some problems:
Table don't show styles. Stylesheet has been defined on the parent page.

There is no tags:
[code]


[/code]

Could you please help me, or it is question to JQuery UI Developers?

Thank you! Andrey.

allan

Hi Andrey,

Welcome to the DataTables forums. Probably worth asking this in a new thread since it's only loosely related to the old one. However, that's for future reference, we'll continue on here. :-)

If you don't initialise the tabs, are the styles shown on the tables (I'm presuming that they will all be visible at the same time if you haven't initialised the tabs)? If so, then there is a very weird interaction with jQueryUI tabs going on, but I would not expect that to be the case.

Any chance you can post a link so we can see what is going on?

Regards,
Allan

underforge

Hi Andrey, this is a bit late so you've probably figured it out but if not, the table div tags need to be within the tabs div id="tabs" tag.

From the docs:
[code]


Nunc tincidunt
Proin dolor
Aenean lacinia


Tab 1 content


Tab 2 content


Tab 3 content


[/code]