Reinitialization doesn't work for pagination

yugenekr

Hi,
I've looked for the solution in the documentation, faq, forum, but still can't find the one, so would be very thankful for your help.

I need to repopulate dataTable with new data. Data is received via ajax request and (re)populate the DOM, then dataTable (re)initialized. Everything works correctly except one moment - pagination remains the same, as for the first population. So is there a way to force pagination being reinitialized also? Or maybe better solution in a hole might be implemented?

Problem may be seen in action: http://www.safar-bladi.com
1. Please select Paris-Adagir --> Search, wait until populated dataTable appears.
2. Select Paris-Oujda --> Serach, wait until repopulated dataTable appears.
3. Data is correct, but for the second step used pagination from the first step.

Simplified code:

[code]
function get_ajax_table(){
$('#tbl_resultates').dataTable({
"bRetrieve": true,
"bDestroy":true,
"aoColumns": [{"bSortable":false},{"bSortable":false},{"bSortable":false},{"bSortable":false},{"bSortable":false},null,null,null,{"bSortable":false},null,{"bSortable":false}],
"bJQueryUI": false,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bFilter": false,
"bAutoWidth": false,
"bInfo": true,
"bLengthChange": false,
"aaSorting": [[ 9, "asc" ]],
"oLanguage": {
"sUrl": Y_R+"/js/dataTablesTranslations/"+LANGUAGE+".txt"
}
});

}


$.ajax({
type: "POST",
asyn: false,
cache: false,
url: "site/ebookers_vols",
data: "some_data",
dataType:'html',
success: function(res){
$('#resultates_rows').html(res);
get_ajax_table();
}
});
[/code]

Thanks a lot.

Regards,
Yuga

yugenekr

Hey, please, anybody, help is still needed.

Maybe not all needed details provided?
Or this question is a stupid one and I should retry everything I've tried already?

Any help would be appreciated.

Regards,
Yuga

allan

I'd try doing it slightly differently from the above. The problem with the above is that you are inserting the HTML and then DataTables is destroying it, since you are telling it to with the bDestroy tag, before it can read it! Is it possible to use sAjaxSource for your table - http://datatables.net/examples/data_sources/ajax.html ? Then you could use fnReloadAjax to get new data. If that isn't an option, then destroy the table before "$('#resultates_rows').html(res);".

Allan

yugenekr

Thanks, I will try to destroy the table earlier.
I think it might be appropriate to use sAjaxSource, but I work with the other developer's code and didn't want to change his implementation. I just needed to fix a problem with reloading the table.

yugenekr

Well, results I'm getting seems to be very strange (at least from my point of view).

1. when I remove tag "bDestroy": true from $('#tbl_resultates').dataTable({...parameters here...}), then pagination doesn't work at all (0

yugenekr

And I don't understand, why do I get the error:

DataTables warning (table id = 'tbl_resultates'): Cannot reinitialise DataTable.

To retrieve the DataTables object for this table, please pass either no arguments to the dataTable() function, or set bRetrieve to true. Alternatively, to destory the old table and create a new one, set bDestroy to true (note that a lot of changes to the configuration can be made through the API which is usually much faster).

Even if dataTable initialized for the first time (or, second variant, destroyed by delete operator) and bRetrieve is set to true (or false, doesn't matter).

Well, still trying to make it work :)

allan

Does it not work if you do something like this:

[code]
$('#tbl_resultates').dataTable().fnDestroy();
$('#resultates_rows').html(res);
get_ajax_table();
[/code]
in your Ajax callback, and remove bDestroy from the table initialisation?

Allan

yugenekr

Yes, it certainly works! Thank you a lot for your work, attention, and help.

That was my stupid mistake in the line $('#tbl_resultates').dataTable().fnDestroy();


And I've found an issue:

Default width of the #tbl_resultates is 100%

When I use fnDestroy, in line (2158) [code]oSettings.nTable.style.width = _fnStringToCss(oSettings.sDestroyWidth);[/code] (More precisely, in function _fnStringToCss())

width is set to 100px (% changed to px !), which destroys needed markup.

allan

Good to hear that works.

Unfortunately there is no way (at least that I know of) for DataTables to read the original styling of 100% width and then reapply it - it must always happen with absolute measurements. So yes, I'd consider this a bug, but not one I can fix at the moment sadly. You can word around this by just setting the width of the table back to 100% yourself after destroying it.

Allan

yugenekr

Hi,

I've got another problem with the same code. Not sure if I should create a new thread for it.

error: a.nTableWrapper is null (or oSettings.nTableWrapper is null, depends on slight difference in implementation)
after using $('#tbl_resultates').dataTable().fnDestroy(); for the second time in other function.

Simplified code looks like this at the moment:

[code]
function get_ajax_table(){
$('#tbl_resultates').dataTable({
"bRetrieve": true,
"aoColumns": [{"bSortable":false},{"bSortable":false},{"bSortable":false},{"bSortable":false},{"bSortable":false},null,null,null,{"bSortable":false},null,{"bSortable":false}],
"bJQueryUI": false,
"bPaginate": true,
"sPaginationType": "full_numbers",
"bFilter": false,
"bAutoWidth": false,
"bInfo": true,
"bLengthChange": false,
"aaSorting": [[ 10, "asc" ]],
"oLanguage": {
"sUrl": Y_R+"/js/dataTablesTranslations/"+LANGUAGE+".txt"
}
});

$('#resultates').show();
}

function func_1(){
$('#tbl_resultates').dataTable().fnDestroy();
$.ajax({
type: "POST",
asyn: false,
url: "site/ebookers_vols",
data: "some_data",
dataType:'html',
success: function(res){
$('#resultates_rows').html(res);
get_ajax_table();
func_2();
}
});
}

function func_2(){
$('#tbl_resultates').dataTable().fnDestroy();

$.ajax({
type: "POST",
asyn:false,
url: "site/bravofly_vols",
data: "some_data",
success: function(res){
$('#resultates_rows').prepend(res);
get_ajax_table();
}});
}
}
[/code]

so the func_2() called after the func_1() and gives the error.

Thank you in advance.

Regards,
Yuga

yugenekr

Hey,
I've got funny results trying to solve my problem:
1. I've installed 1.7.5_dev version of the script
2. It works greate if I put alert() just before
[code]
$('#tbl_resultates').dataTable().fnDestroy();
[/code]

in func_2()

And doesn't sent ajax request if I delete the alert()!
Never met such a thing, anyone has an idea?

I'm just in one step to have working version :)

Regards,
Yuga

yugenekr

Well, after trying different variants, I've found a simple solution: move $('#tbl_resultates').dataTable().fnDestroy(); into ajax success response. So this is a working variant:
[code]

function func_2(){
$.ajax({
type: "POST",
asyn:false,
url: "site/bravofly_vols",
data: "some_data",
success: function(res){
$('#resultates_rows').prepend(res);
$('#tbl_resultates').dataTable().fnDestroy();
get_ajax_table();
}});
}
}

[/code]

Hope this will help someone.

Yuga