Mutliple Datatables with different sources.

wakemaster39

Hey all,

I am currently trying to hack together a webpage that has 3 different datatables on it. And all three of them are going to need to use a different AJAX source. The easiest method I found is to create 3 different initializations of the datatables on different tables with different id's. This seems to be like a bunch of extra code being transferred around for not real reason.

From a post that I have lost along the way I found that you can access the different table settings from a single initialization using the $.fn.dataTableExt.iApiIndex function. This works somewhat but brings in a new issues. The exact code that I have is this:

[code]
jQuery(document).ready(function() {
var oTable = jQuery('.datatable').dataTable({
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 25,
"bInfo": false,
"sAjaxSource": "/streams/xhr_stream_list",
"bProcessing": true,
"bServerSide": true,
"aoColumnDefs": [
{ "bVisible": false, "aTargets": [ ] },
{ "sClass": "tc", "aTargets": [ -1, -2 ] },
{ "sWidth": "30%", "aTargets": [ 0 ] },
{ "bSortable": false, "aTargets": [ 7,8 ] }
],
"aLengthMenu": [ 25, 50, 100 ],
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
<%# fnRowCallback is called for each row -%>
return nRow;
},
"fnServerData": function ( sSource, aoData, fnCallback ) {
<%# the main callback for processing json data -%>
jQuery.getJSON( sSource, aoData, function (json) {
fnCallback(json)
});
}

});

//set default sorting
$.fn.dataTableExt.iApiIndex = 0;
oTable.fnSettings().sAjaxSource = "/streams/xhr_stream_list?source=offline_streams";
$.fn.dataTableExt.iApiIndex = 1;
oTable.fnSettings().sAjaxSource = "/streams/xhr_stream_list?source=unapproved_online_streams";
$.fn.dataTableExt.iApiIndex = 2;
oTable.fnSettings().sAjaxSource = "/streams/xhr_stream_list?source=unapproved_offline_streams";



oTable.fnSort( [ [0,'desc'] ] );
oTable.fnSetFilteringDelay(250);
});
[/code]

If I look at firebug at the XHR calls that are done, the first two datatables (and initialization call also uses it) use the initial sAjaxSource while the last table uses the proper updated ajax source. If I go on the page and play with the tables the other tables also use the proper source just not on the initial load.

The odd thing about it is that depending on which table is listed last, it changes which table loads the proper source. But again once I update the page in any way that requests a new AJAX call it all just works using the proper source.

Does anyone have any suggestions on how I can get the other 2 tables to load properly? Any thought is greatly appreciated.