Using datatables with jQuery UI tabs

findpritz

Hello all,

I'm using datatables with jQuery UI tabs in my web application.
I'm fairly new to jquery and datatables.

My requirement is as follows :

One my first tab, I have many Submit buttons each of which open in different tabs, and a different data table gets loaded on each submit button via a AJAX call.

So, this is how my sample Javascript function looks like on a sample Submit button

function abc(){
**some code here**
$.ajax({url : **some code here**,
type:'POST',
data:**some code here**,
datatype:'html',
error:function(){
**some code here**
},
success:function(html){
$('#exampledivid').html(html);
$('#table-id').dataTable({
"iDisplayLength": 25,
"sPaginationType": "full_numbers",
//"sDom": '<"top"lpf>rt<"bottom"ip<"clear">'
"sDom": '<"top"lpf>t<"bottom"ip><"clear">',
"bAutoWidth": false,
"aoColumns":[null, null, null, null, null, null, null, null]

});

$("#tabs").tabs("select", 1);
}
});

}

Now, the problem I'm having is all my datatables options(display length, search,page navigation) are getting printed on the first tab itself, and the not the second one, the way I want it.

Any help will be greatly appreciated.

Thanks,
Pritish.

allan

Is it just a problem with the table ID? $('#table-id')? - Remember you can only have one DOM element with that ID on a page, and I don't see any handling for this in your code. If you poke around in Firefox, or just check what $('#table-id') is returning, it might be an unexpected node.

Allan

findpritz

well, this is what my actual function looks like.

function consAll(){

$.ajax({
url: **some code here**,
type:'POST',
data: {
**some code here**
},
datatype:'html',
error: function(){
alert('Error submitting request to server to test query.');
**some code here**

},
success: function(html){
**some code here**

$('#consentAll').html(html);

$('#consAll').dataTable({
"aoColumns": [null, null, null, null, null, null, null, null]
});

$("#tabs").tabs("select", 1);
}

});
}

Now, in this line

$('#consentAll').html(html);

I'm setting the innerHTML of the consentAll div to the html returned by my ajax query.
This div is present in results.jsp

Now,using this

$('#consAll').dataTable()

I want to use dataTables on the table with id=consAll, which is the effectively the second tab of results.jsp webpage.

When I try the above code, all datatables options(display length, search,page navigation) get displayed on first tab, and not second tab.

Does this make things clearer?

Thanks,
Pritish.

findpritz

Just a note...when I'm trying to print the table id using this

[code]
alert($("consAll"));
[/code]

I'm getting object Object.

Not sure, I entirely understand by what that means..
Another thing, I wanted to know is what is difference if I use single quotes in the above alert statement,
i.e.

[code]
alert($('consAll'));
[/code]

It still returns the same thing.Is there any difference between single and double quotes.

Thanks,
Pritish.

findpritz

Sorry, I forgot to include the # in both the pieces of code above.

it should be
[code]
alert($("#consAll"));

OR

alert($('#consAll'));
[/code]

findpritz

Any help will be greatly appreciated.
i'm really still stuck with this.