Latest version of DataTables works with "bStateSave": true, and not with saveState: true

musicisall

(as posted on stackoverflow)

I have a table which uses JQuery DataTables. It's a list of items each one with an hyperlink. When the user clicks on that hyperlink they go to a separate 'detail' page. When they go back I'd like them to find the table how they found it.

This is the initialisation script for the table:

$(document).ready(function() {

// Setup - add a text input to the cell's headers
 document.querySelectorAll('#mainTable thead th')[1].innerHTML += '<input type="text" placeholder="Search" />';
 document.querySelectorAll('#mainTable thead th')[2].innerHTML += '<input type="text" placeholder="Search" />';
 document.querySelectorAll('#mainTable thead th')[3].innerHTML += '<input type="text" placeholder="Search" />';
 document.querySelectorAll('#mainTable thead th')[4].innerHTML += '<input type="text" placeholder="Search" />';


// DataTable

var table = $('#mainTable').DataTable( {
    colReorder: true,
    lengthMenu: [25, 50, 75, 100 ],
    retrieve: true,
    saveState: true,

  "columns": [
    { "orderable": true,
      "className": "dateSent" },
    { "orderable": false },
    { "orderable": false },
    { "orderable": false },
    { "orderable": false },
    { "orderable": false },
    ]
} );

// Apply the filter


$("#mainTable thead input").on( 'keyup change', function () {
    table
        .column( $(this).parent().index()+':visible' )
        .search( this.value )
        .draw();
} );
        });

As it is, every time the user clicks 'back' from the detail page they'll find the table at page 1, even if they left it at page 3.

The only workaround I have found is using the code:

                        "bStateSave": true,
                        "fnStateSave": function (oSettings, oData) {
                            localStorage.setItem( 'DataTables', JSON.stringify(oData) );
                        },
                        "fnStateLoad": function (oSettings) {
                            return JSON.parse( localStorage.getItem('DataTables') );
                        },

This is DataTables 1.10.20. Why can't I use the saveState option? When using it, the localStorage of my browser looks empty, and doesn't get written when I change table-page.

musicisall

It is likely to be the AdBlocker Plugin, which allegedly prevents, sometimes, DataTables to store to the localStorage. I'll need to test this further thoguh, since it seems happening a bit randomly.

colin

We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin