The state is not saved in my localStorage

luca.g

Hello,

I have been searching all over the place for a solution to my issue, to no avail. My table does not want to save its state, even when triggering a state save in my browser's console. I am not able to upoload my debug data because I get a generic 'Sorry, an error occured' error.

This is my table initialisation:

    $( document ).ready(function() {
        do_search();
    });
    
    function do_search()
    
    {
    
    
          $('#events').DataTable().destroy()
    
                  var table = $('#events').DataTable({
                    saveState: true,
                    "ajax":     {
                      "url": "get_results.php",
                      "async": "false",
                      "type": "get",
                      "data": function ( d ) {
                        return $.extend( {}, d, {
                          "search_location": $("#search_location").val(),
                          "search_event_type": $("#search_event_type").val(),
                          "search_orator": $("#search_orator").val(),
                          "search_f_t": $("#search_f_t").val(),
                        } );
                      }
                    },
                    columns: [
                      { data: 'eventid' },
                      { data: 'event_type' },
                      { data: 'date_display' },
                      { data: 'date_from' },
                      { data: 'date_to' },
                      { data: 'location' },
                      { data: 'done' },
                      { data: 'view' },
                  ],
                    "lengthMenu": [ [-1, 10, 25, 50, 100], ["All", 10, 25, 50, 100] ]
                  });
    
                  $(".view").on("click", async function(e) {
                    $('#events').DataTable().state.save();
                    console.log('saved');
    
                    await Promise.resolve();
    
                    });
    
     return false;
    }

As I wrote, even triggering $('#events').DataTable().state.save() in my browser's console, although returning no errors (it returns the object) doesn't save anything in my localStorage, which is empty.

luca.g

Information about 1 table available
#events
Data source:    Ajax
Processing mode:    Client-side
Draws:  2
Columns:    8
Rows - total:   3514
Rows - after search:    3514
Display start:  0
Display length: -1

Version check
Check to see if your page is running the latest DataTables software.
LibraryInfoInstalledLatest
DataTablesUp to date1.12.11.12.1
AutoFill -2.4.0
Buttons -2.2.3
ColReorder -1.5.6
Editor -2.0.10
FixedColumns -4.1.0
FixedHeader -3.2.4
KeyTable -2.7.0
Responsive -2.3.0
RowGroup -1.2.0
RowReorder -1.2.8
ScrollerUp to date2.0.72.0.7
SearchBuilder -1.3.4
SearchPanes -2.0.2
Select -1.4.0

kthorngren

You have saveState: true, but the option is stateSave. Try changing to stateSave: true,.

Kevin

luca.g

This is a CodePen where my code is simplified and there isn't even an ajax call. You can see that the scrolling state is not being saved.

luca.g

For some reason it has now started working on my server (still not in the CodePen though).

kthorngren

The first problem is you have two tbody tags in the table. Notice the table has both No data available in table and Showing 0 to 0 of 0 entries meaning it didn't find the table data. Remove the extra tbody.

You can see that the scrolling state is not being saved.

You haven't properly enabled scrolling. Not sure if you are using only scrollY or if you are using the Scoller extension. See this scrollY option only example. I don't believe the scroll position is saved when using scrollY.

The Scroller extension works with stateSave. See this example.

If you still need help please update the test case to properly show the issue you are having.

Kevin

luca.g

Thank you. I did make a mess of my CodePen example, I apologise. I've fixed the wrong HTML and it's now working properly. Thank you for picking up the stateSave/saveState mix-up too. The scroll position is saved indeed when using the scrollY option.