Reinitializing the same DataTables in 2 tabs (using jquery ui tabs)

newtodatatables

Hi, this is my maiden post for help. I have been exploring datatables for quite some time for a solution. Please help! Thanks in advance.

I have a index.jsp which is my main page and there is a link to open a datatable (test.html) in a new tab (using jqueryui tab) in index.jsp. When I click on the link, it will add a tab via addTab(x) function. The problem is that when I click on the same addTab again, it adds in another tab, but only the first datatables work. (I have tried bDestroy and bRetrieve). The second tab displays the datatables BUT the search function does not work. It searches the datatable in the FIRST tab instead.

Is there a way to make both the datatables in the 2 tabs to work? (both tabs are using the same datatables)
Or is there a method to reinitialize the datatable when i switch tab?

index.jsp

[code]
<%--imported all the required js--%>


@import "css/demo_page.css";
@import "css/demo_table.css";
@import "css/ColReorder.css";
@import "css/ColVis.css";



$(".links a").click(function() {
addTab($(this));
});

function addTab(links) {
$( "#tabs" ).tabs('add', $(links).attr("title"), $(links).attr("rel"));
}

var $tabs = $( "#tabs").tabs({
add: function( event, ui ) {
$tabs.tabs('select', '#' + ui.panel.id);
return false;
}
[/code]

Link in index.jsp
[code]

Find Something

[/code]


My datatable. test.html

[code]






$(document).ready(function() {
var oTable;

oTable = $('.egtable').dataTable( {

"bDestory" : true,
"bAutoWidth" : false,
"sDom": 'RC<"clear">lfrtip',
"sAjaxSource": "source.jsp",
"oLanguage": {
"sSearch": "Search all columns:"
}

} );

} );









Test col 1
Test col 2














[/code]

Really sorry if the topic is too long.. I wanted to give a clear picture of my problem. Hope you can enlighten me. Thanks!

newtodatatables

Another problem I have noticed is that the 'highlight row' function stop working after the second tab was added. In the first tab, it still works, but in the second tab, it selects every row i click on.

newtodatatables

Can anyone help me out? Thanks in advance

newtodatatables

To cut my question short, what I am trying to know is if it is possible to open 2 instance of the same datatables in 2 different jqueryui tabs. I have edited my code to make it much simpler to understand. Would really appreciate if there is someone who can help / point me in the right direction.

newtodatatables

Can anyone help? :(

allan

> what I am trying to know is if it is possible to open 2 instance of the same datatables in 2 different jqueryui tabs

No this is not possible. You can't have two "views" of the same table, since the table node is unique. What you could do is have multiple tables with the same data in them - that would work fine since you can have as many individual DataTables on the page as you want.

Allan

newtodatatables

Alright! Thank you for your comments. I will just have to figure out a way to create unique table IDs since I am using the same initialization method and also jqueryui tabs which make this problem rather challenging to me.