stateSaving via ajax

I switched form local state saving to ajax state saving. This is my code:

$.extend( true, $.fn.dataTable.defaults, {
    stateSaveCallback: function(settings, data) {
        var tableId = settings.nTable.id; //id of the data table
        $.ajax({
            type: "POST",
            url: 'actions.php?action=saveState',
            data: {
                userId:     currentUserId,
                dataTable:  tableId,
                webPage:    webPage,
                values:     JSON.stringify(data)
            }
        });
    },
    stateLoadCallback: function(settings, callback) {
        var tableId = settings.nTable.id; //id of the data table
        $.ajax({
            type: "POST",
            url: 'actions.php?action=retrieveState',
            data: {
                userId:     currentUserId,
                dataTable:  tableId,
                webPage:    webPage,
            },
            dataType: "json",
            success: function (json) {
                callback(JSON.parse(json));
            }
        });
    }
} );

I had not problems using this code with a fairly large data table with very many columns hidden by the responsive extension. Everything worked just fine!

But I have a different use case, too. A table that has two parent tables (department -> contract -> element). So this element table caused the problem. When selecting a contract which causes the loading of the elements table duplicates of each record would be displayed. I could verify that those duplicated records weren't loaded from the server. They must have come from some kind of data tables cache.

This is probably what happened: The dt initialization didn't wait for the stateLoadCallback to complete and loaded the data table. Then - on completion of the callback - the rows were loaded again from the cache. Hence the duplication. I had serious issues with my users: They started deleting the duplicates - and ended up destroying their data! Because either way Editor deleted the records in the database.

To avoid this very serious issue I changed "stateLoadCallback" to synchronous mode, as defined in the docs:

stateLoadCallback: function(settings) {
    var tableId = settings.nTable.id; //id of the data table
    var o; //for synchronous processing
    $.ajax({
        type: "POST",
        url: 'actions.php?action=retrieveState',
        data: {
            userId:     currentUserId,
            dataTable:  tableId,
            webPage:    webPage,
        },
        async: false,
        dataType: "json",
        success: function (json) {
            o = JSON.parse(json);
        }
    });
    return o;
}

That caused a different problem: The duplication of the rows stopped but the retrieved state was ignored: Obviously the data table initialization did not wait for "stateLoadCallback" to complete and initialization was done as if there was no state.

I am stuck with this. I have tried state saving so many times and always ended up with problems that were very hard to resolve. Please help.

My workaround for now is: I use state saving only for 4 selected data tables where I know it works. And disabled it for a couple of dozen other data tables. Very frustrating.

Please help.