Load State Not Honouring Data

daduffy

So I am fully perplexed. I have read and reread the various posts on loading state data from a DB and followed all of those. I must be missing something because my load state just plain isn't working.

I have even stripped down all of the code and provided the raw json to the callback with no success. Any help would be appreciated.

Here is my init code:

    table = $('#tblcontacts').DataTable({
        fixedHeader: {
            header: true,
            footer: false
        },
    "dom": 'Bifr<"contactstoolbar">t',
        "pageLength": -1,
    select: {
        'style': 'multi'
    },
    "language": {
      "emptyTable": "Retrieving Contacts <i class='fa fa-circle-o-notch fa-spin'></i>",
      "loadingRecords": "Retrieving Contacts <i class='fa fa-circle-o-notch fa-spin'></i>"//,
    },
        buttons: {
            dom: {
            button: {
              className: 'btn btn-secondary'
            }
          },
            buttons: buttons
        },
        responsive: true,
    "ajax": contactSource,
    columns: columns,
        "columnDefs": columnDefs,
        'order': [[1, 'asc']],
        initComplete: function () {
            tblContactComplete() ;
    },
    colReorder: true,
    stateSave:  true,
    stateDuration: ( 60 * 60 * 24 * 1000),
    "stateSaveCallback": function (settings, data) {
        stateSaveCallback( settings, data ) ;
      },
    "stateLoadCallback": function (settings, callback) {
        stateLoadCallback( settings, callback ) ;
    }
    });
} ;

Here is my state load function:

  stateLoadCallback = function ( settings, callback ) {
    $.ajax( {
      "url": my-real-url,
        "type": 'POST',
      "data": {
                'dpc': document.getElementById( 'dpc_session' ).value,
                'table': 'contacts'
      },
      "dataType": "json",
      success: function (json) {
        callback( json );
      }
    } );
  } ;

Here is the json that is returned from the ajax call:

{"time":1552571144004,"start":0,"length":-1,"order":{"0":[]},"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true},"columns":{"0":{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"1":{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"2":{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"3":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"4":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"5":{"visible":true,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"6":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"7":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"8":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"9":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"10":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"11":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"12":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"13":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"14":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"15":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"16":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}},"17":{"visible":false,"search":{"search":"","smart":true,"regex":false,"caseInsensitive":true}}},"ColReorder":[]}

However, columns 3 and 4 still show up and 5 is hidden.

Thank you in advance.

colin

Hi @daduffy ,

At a glance, that all looks good. 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

allan

Agreed - that looks like it should be good (make sure you are using the latest version of DataTables btw). As Colin says, we'd need a link to a page showing the issue to be able to identify the issue beyond that.

Allan

daduffy

Thank you for the replies.

I have put together a test case on the Datatables test page. Even though I had to make some edits to get the test case up, the problem occurs there as well.

http://live.datatables.net/wofaqega/1/edit

I hope I got that url correct, let me know if you need anything else.

Dave

kthorngren

My guess is its something in your stateSaveCallback function. I added a console.log(data) statement in the function and see this for the columns:
http://live.datatables.net/bevogemi/1/edit

columns: (22) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

Its an array of objects. However in your example your statesave example data your columns are an object containing objects with the key being the column number:

    "columns": {
        "0": {
            "visible": true,
            "search": {
                "search": "",
                "smart": true,
                "regex": false,
                "caseInsensitive": true
            }
        },
        "1": {
            "visible": true,
            "search": {
                "search": "",
                "smart": true,
                "regex": false,
                "caseInsensitive": true
            }
        },
        "2": {
            "visible": true,
        .........

Not sure what this change is taking place but it seems the column data structure you are applying is not correct.

Kevin

daduffy

I spent some time tinkering with what you suggested @kthorngren but that didn't appear to get it. Thank you though, it was a very good catch.

Here is the updated test case, change the variable at the top of the page to see the change... which is no difference.
http://live.datatables.net/wofaqega/2/edit

In fact, I had gone through the trouble of changing the data as it was written to the DB or coming from the DB to make the data.columns field an array of objects, when that happens DataTables errors out, Uncaught TypeError: Cannot read property 'aDataSort' of undefined.

I appreciate the help on this one... I am completely at a loss.

Dave

colin

Hi @daduffy (and Kevin!),

This here appears to be behaving as expected - It's loading the table, searching for "Jenny" and ordering on the second column.

I find the easiest way with those kind of problems is to store the saved data for stateSaveCallback 's initial load (you can clear it with state.clear()) - then you can see the expected format.

Hope that helps,

Cheers,

Colin

daduffy

So, it turns out that I was off in my figurings and thought I would post my solution for anyone else with this problem.

The underlying problem was that I wasn't tranforming the data into JSON before sending it.

Originally my app saved, and accessed the data via a php page, but, due to volume, we have been changing a lot of the app's functions over to Node. Although PHP takes a JS object from a POST and handles it, Node is a little more demanding that what it takes in is correct. I should always stringify any data I am going to pass via POST, but haven't always done that, and, frankly, it was only this complex object from Datatables that brought the problem to light.

Thank you agian for all of your help, @colin and @kthorngren.

Dave