Back/Forward Buttons in Browser causes multiple drawings

pash26

I'll try to describe to the best of my ability. So what happens is if I click on any link from the page with the datatables then click back, it seems to draw another part of the datatable on top of the datatable. Clicking back/forward multiple times, creates multiple partial datatables on top of the datatable.

Here's the link to the dubgger:
http://debug.datatables.net/ifujak

Here's the link to the page I'm seeing:
http://dl.dropbox.com/u/12379649/datatables_bug.png

Initialization Code:
$('#league_index').dataTable({
'sPaginationType': 'full_numbers',
'bJQueryUI': true,
'bProcessing': true,
'bServerSide': true,
'sAjaxSource': $('#league_index').data('source'),
'aoColumnDefs': [
{ "bSortable": false, "aTargets": [ 1 ] },
{ "bSortable": false, "aTargets": [ 2 ] },
{ "bSortable": false, "aTargets": [ 3 ] },
{ "bSortable": false, "aTargets": [ 4 ] },
{ "bSortable": false, "aTargets": [ 5 ] }
],
'bFilter': false,
'iDisplayLength': 25,
'bRetrieve': true
})

allan

Are you able to link to a test case? It looks like DataTables is initialising multiple times on the table - which it obviously shouldn't be doing.

Allan

pash26

Hello Allan,

Thanks for taking a look. I can't link to a test case. But thanks for the lead. It seems to be doing that.
I think it's related to how datatables interacts with pjax. I found something in stackoverflow, but no solutions yet.

http://stackoverflow.com/questions/13236676/pjax-back-button-destroys-datatables

pash26

If all else fails, I'll probably have to disable pjax since I never had this problem from other projects where I didn't use pjax.

pash26

I tried no-pjax on my pages with datatables, but since some pages are still using pjax, it's still happening if I click back and forth from my datatables page to the pjax enabled page.

Can anyone suggest how to make it work well with pjax? Currently, my datatable initialization code resides in pjax:end. Wondering if I could leverage pjax:start to fix the problem.

Thank you!

pash26

I found a working solution hopefully without unforeseen problems.

[code]
$(document).ready ->
initLeagueIndexDataTable()

$(document).on 'pjax:end', ->
initLeagueIndexDataTable()

initLeagueIndexDataTable : ->
if ($('#league_index').length > 0 && !$('#league_index_wrapper').length > 0)
$('#league_index').dataTable({
'sPaginationType': 'full_numbers',
'bJQueryUI': true,
'bProcessing': true,
'bServerSide': true,
'sAjaxSource': $('#league_index').data('source'),
'aoColumnDefs': [
{ "bSortable": false, "aTargets": [ 1 ] },
{ "bSortable": false, "aTargets": [ 2 ] },
{ "bSortable": false, "aTargets": [ 3 ] },
{ "bSortable": false, "aTargets": [ 4 ] },
{ "bSortable": false, "aTargets": [ 5 ] }
],
'bFilter': false,
'iDisplayLength': 25,
'bDestroy': true
})
[/code]