Using datatables with jQuery UI tabs
Using datatables with jQuery UI tabs
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.
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.
This discussion has been closed.
Replies
Allan
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.
[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.
it should be
[code]
alert($("#consAll"));
OR
alert($('#consAll'));
[/code]
i'm really still stuck with this.