Cannot load previously saved state from DB into DataTables

Eyad Mohammed Osama

Greetings to everyone
I want to save the state of the DataTable into the DB for later retrieval, and i made this happen
Now i want to retrieve this state into the DataTable once again
The problem is that the browser keeps reading the state from the localStorage object, and when i try to return the read value from the DB i get an error that says:

Uncaught TypeError: Cannot read properties of null (reading 'match')

All i'm doing is to pass the state object to the callback() function from within stateLoadCallback()
By the way, also return the state object from within stateLoadCallback() gives the same error
What could the problem be ?

Here's the code i'm using:

function initializeDataTable(columns, tablename, state = {}) {
    $("#table").addClass("nowrap");
    const table = $("#table").DataTable({
        responsive: true,
        colReorder: true,
        stateSave: true,
        stateSaveCallback: function (_, currentState) {
            $.ajax({
                url: '/system/dashboard/table-configurations/save-state',
                method: 'POST',
                data: {
                    table_name: tablename,
                    state: currentState
                }
            });
        },
        stateLoadCallback: function (_, callback) {
            console.log(state); // This output a correct state object
            callback(state);
        },
        dom: `<
                <"hidden"B>
                <"mb-2 row"
                    <"#action-buttons.col.my-auto">
                    <"col-2"l>
                    <"#export-buttons.col-4.my-auto">
                    <"#custom-search-bar.col">
                >
                <"datatable-planacer-container"
                    <t>
                >
                <"mb-2 row"
                    <"col-3"i>
                    <"col-6"
                        <"mx-auto"p>
                    >
                    <"col-3">
                >
            >`,
        buttons: [{
                extend: 'excel',
                title: null
            },
            {
                extend: 'csv',
                title: null
            },
            {
                extend: 'print',
                title: ""
            },
            {
                extend: 'pdf',
                title: null
            },
            {
                extend: 'copy',
                fieldSeparator: ",",
                text: "copy",
                title: null
            }
        ],
        lengthMenu: [
            [5, 10, 25, 50, 75, 100, -1],
            [5, 10, 25, 50, 75, 100, "All"]
        ],
        columns: columns,
        order: [
            [1, 'desc']
        ]
    });
}

When i call the function, i use the following code:

const state = @json($configuration); // This is a directive available in Laravel, it renders the variable as a JSON object
const columns = [{
        orderable: false
    },
    null,
    null
];

initializeDataTable(columns, "corporate-labels", state);

The $configuration variable from the previous example is just the serialized state object fetched from DB

Thanks in advance

allan

If you are storing the state at the server-side, you need to use stateLoadCallback to make a call to the server to get that Ajax state. There is an example on that options' documentation page showing how that can be done.

Allan