Multiples tables and different sAjaxSource whith ajax

Ertys

Hi, I have been quite a while with this problem, I have checked every forum post and I've read everything but can not find the solution. Would be very grateful if someone can help me.

I have generated the following code to 3 tables in my case the tables are generated dynamically according to categories, for this reason that each sAjaxSource need to be different. The generation of JSON is correct.

[code]
var oTable1;

$(document).ready(function() {
var aSelected = [];

oTable1 = $('.datatable1').dataTable({
'bProcessing': true,
'bLengthChange': true,
'bPaginate': true,
'bStateSave': false,
'sPaginationType': 'full_numbers',
'iDisplayLength': 10,
'bSort': true,
'aaSorting': [],
'bInfo': true,
'bAutoWidth':false,
'aoColumns': [
{ "sClass": "left" },
null,
{ "sClass": "left" },
{ "sClass": "left" },
{ "sClass": "left" },
{ "sClass": "center" },
{ "sClass": "right" },
{ "sClass": "right" },
null
],
"bServerSide": true,
"sAjaxSource": "ajax/ContentTable.php?CatId=xx",
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if ( jQuery.inArray(aData.DT_RowId, aSelected) !== -1 ) {
$(nRow).addClass('row_selected');
}
return nRow;
}

});

$.fn.dataTableExt.iApiIndex = 0;
oTable1.fnSettings().sAjaxSource = "ajax/ContentTable.php?CatId=7";

$.fn.dataTableExt.iApiIndex = 1;
oTable1.fnSettings().sAjaxSource = "ajax/ContentTable.php?CatId=11";

$.fn.dataTableExt.iApiIndex = 2;
oTable1.fnSettings().sAjaxSource = "ajax/ContentTable.php?CatId=10";

} );
[/code]


This code initially shows me no results, I sAjaxSource the code shows the base (catid = xxx), but if I do an action each table, search, sort, etc. shows me the correct result!

If anyone can tell me you are doing wrong I would appreciate.

Thanks!

thanks

allan

What you've done would work, I think if you just add a 'oTable1.fnDraw();' each time you set the required Ajax source.

However, I think a better way would be to template your initialisation options and create three table objects. Something like:

[code]
var defaults = {
"bProcessing": true,
...
};

oTable1 = $('.datatable1').dataTable( $.extend( true, {}, defaults, {
"sAjaxSource": "ajax/ContentTable.php?CatId=7"
} );

oTable2 = $('.datatable2').dataTable( $.extend( true, {}, defaults, {
"sAjaxSource": "ajax/ContentTable.php?CatId=11"
} );
...
[/code]

Allan

Ertys

Thanks for the fast answer!
The solution that tells me is not working. Try adding fnDraw () to functions but does not work.

The only thing that is working for me right now is to repeat the following code as a category have:

[code]
oTable1 = $('#datatable1').dataTable({
'bProcessing': true,
'bLengthChange': true,
'bPaginate': true,
'bStateSave': false,
'sPaginationType': 'full_numbers',
'iDisplayLength': 10,
'bSort': true,
'aaSorting': [],
'bInfo': true,
'bAutoWidth':false,
'aoColumns': [
{ "sClass": "left" },
null,
{ "sClass": "left" },
{ "sClass": "left" },
{ "sClass": "left" },
{ "sClass": "center" },
{ "sClass": "right" },
{ "sClass": "right" },
null
],
"bServerSide": true,
"sAjaxSource": "ajax/ContentTable.php?CatId=7",
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if ( jQuery.inArray(aData.DT_RowId, aSelected) !== -1 ) {
$(nRow).addClass('row_selected');
}
return nRow;
}

});
[/code]
Where $ DataTable1 is different for each category.

As categories drawn from the database, on occasions can become more than 5, 10 or more, and that would cause extensive code. If you could how to reuse the code and try to do recently.

thanks