Tabs and server side tables

andyle2k

Hi all,

I have 3 server side DataTables that I wish to consolidate into 1 tabbed table. I tried the examples but I'm not good enough with JS (actually I don't know much at all!) to change them to initialize at tab click instead of on page load.

Can somebody please give me an example and help me out?

These are my tables, I'm using ASP NET and SQL to return JSON results:
[code]

$(document).ready(function () {
idTable = $('#outstanding').dataTable({
"bJQueryUI": true,
"sScrollX": "600px",
"sScrollY": "150px",
"aaSorting": [[0, "desc"]],

"sPaginationType": "full_numbers",
"bServerSide": true,
"sAjaxSource": "Outstanding.aspx"
});
});



$(document).ready(function () {
idTable = $('#reported').dataTable({
"bJQueryUI": true,
"sScrollX": "600px",
"sScrollY": "200px",
"aaSorting": [[0, "desc"]],
"sPaginationType": "full_numbers",
"bServerSide": true,
"sAjaxSource": "RecentlyReported.aspx"
});
});



var oTable;
$(document).ready(function () {
oTable = $('#allstudies').dataTable({
"bJQueryUI": true,
"sDom": 'RT<"clear"><"H"Cfr>t<"F"ilp>',
"oTableTools": {
"sSwfPath": "media/swf/copy_csv_xls_pdf.swf"
},
"oLanguage": {
"sLengthMenu": 'Display ' +
'10' +
'20' +
'50' +
'100' +
'All' +
' records'
},
"sScrollX": "600px",
"sScrollY": "300px",
"aaSorting": [[0, "desc"]],
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [1] }
],
"sPaginationType": "full_numbers",
"bServerSide": true,
"sAjaxSource": "AllStudies.aspx"
});

});

[/code]

Thank you very much.