Back/Forward Buttons in Browser causes multiple drawings

Back/Forward Buttons in Browser causes multiple drawings

pash26pash26 Posts: 6Questions: 0Answers: 0
edited February 2013 in Bug reports
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
})

Replies

  • allanallan Posts: 57,229Questions: 1Answers: 9,111 Site admin
    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
  • pash26pash26 Posts: 6Questions: 0Answers: 0
    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
  • pash26pash26 Posts: 6Questions: 0Answers: 0
    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.
  • pash26pash26 Posts: 6Questions: 0Answers: 0
    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!
  • pash26pash26 Posts: 6Questions: 0Answers: 0
    edited February 2013
    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]
This discussion has been closed.