Ajax function with full data in DB

mnk

Link to test case https://codepen.io/mnk85/pen/gOypjdd**:
**Description of problem:
I really need your help. I'm exploring Datatable and I must confess I'm struggling a lot .

The goal is to use the "StatesRestore" feature of my table with my database. Everything is directly connected to the database (load, remove, save, rename). I tried to follow the official documentation and therefore used Ajax functions to achieve this.

At the moment of writing this message, I have one problem with the "remove" action. When I create a state, it appears with a name like "State 2" and an API call is made to save this state in the database. No problem so far. The issue is that if I want to perform an action on this state (for example, deleting it), it doesn't work because the state doesn't have the ID of my database in its data.

I've tried everything (latest attempt below) to provide it with this ID (which I do have in my API response) but it doesn't work.

const saveResponse = await callAPI('/stateSave', 'POST', tokenbis, userId, 'post_tab_state', requestData);
if (saveResponse && saveResponse.success) {
    requestData.state.stateRestore.id = saveResponse.data.id_state;
    console.log('New state saved with data', requestData);
    callback({
        state: requestData.state
    });
}

Can you tell me how to give it the ID from my API response so that I can delete this state? Currently, I have to reload the entire page to delete it (my load action properly loads the data with the ID).

I've put all the code on CodePen, so you can see the code logic clearly.

mnk

I don't know if it can help but I have the impression that I'm "loading" the data incorrectly for the datatable.
I have the name(s) of the states that I loaded but I cannot modify them either and no state changes when I click on the different states.

Below is the raw code that I will process next:

{
    "id": 506,
    "user_id": 1,
    "table_name": "mon etat",
    "state_data": "{\"time\":1709637815351,\"start\":0,\"length\":50,\"order\":[[0,\"asc\"]],\"search\":{\"caseInsensitive\":true,\"search\":\"\",\"regex\":false,\"smart\":true,\"return\":false,\"_hungarianMap\":[]},\"columns\":[{\"visible\":false,\"search\":{\"caseInsensitive\":true,\"search\":\"\",\"regex\":false,\"smart\":true,\"return\":false}},{\"visible\":true,\"search\":{\"caseInsensitive\":true,\"search\":\"\",\"regex\":false,\"smart\":true,\"return\":false}},{\"visible\":true,\"search\":{\"caseInsensitive\":true,\"search\":\"\",\"regex\":false,\"smart\":true,\"return\":false}},{\"visible\":true,\"search\":{\"caseInsensitive\":true,\"search\":\"\",\"regex\":false,\"smart\":true,\"return\":false}},{\"visible\":true,\"search\":{\"caseInsensitive\":true,\"search\":\"\",\"regex\":false,\"smart\":true,\"return\":false}}],\"colReorder\":[0,1,2,3,4],\"page\":0,\"stateRestore\":{\"isPredefined\":false,\"state\":\"State 2\",\"tableId\":\"tab01\",\"isPreDefined\":false}}",
    "created_at": "2024-03-05 13:23:35",
    "updated_at": "2024-03-06 11:34:59"
}

Once processed, this is what I send to the datatable:

{
    "time": 1709637815351,
    "start": 0,
    "length": 50,
    "order": [
        [
            0,
            "asc"
        ]
    ],
    "search": {
        "caseInsensitive": true,
        "search": "",
        "regex": false,
        "smart": true,
        "return": false,
        "_hungarianMap": []
    },
    "columns": [
        {
            "visible": false,
            "search": {
                "caseInsensitive": true,
                "search": "",
                "regex": false,
                "smart": true,
                "return": false
            }
        },
        {
            "visible": true,
            "search": {
                "caseInsensitive": true,
                "search": "",
                "regex": false,
                "smart": true,
                "return": false
            }
        },
        {
            "visible": true,
            "search": {
                "caseInsensitive": true,
                "search": "",
                "regex": false,
                "smart": true,
                "return": false
            }
        },
        {
            "visible": true,
            "search": {
                "caseInsensitive": true,
                "search": "",
                "regex": false,
                "smart": true,
                "return": false
            }
        },
        {
            "visible": true,
            "search": {
                "caseInsensitive": true,
                "search": "",
                "regex": false,
                "smart": true,
                "return": false
            }
        }
    ],
    "colReorder": [
        0,
        1,
        2,
        3,
        4
    ],
    "page": 0,
    "stateRestore": {
        "isPredefined": false,
        "state": "mon etat",
        "tableId": "tab01",
        "isPreDefined": true
    },
    "id": 506,
    "c": {
        "_createInSaved": false,
        "create": true,
        "creationModal": false,
        "i18n": {
            "creationModal": {
                "button": "Create",
                "colReorder": "Column Order",
                "columns": {
                    "search": "Column Search",
                    "visible": "Column Visibility"
                },
                "length": "Page Length",
                "name": "Name:",
                "order": "Sorting",
                "paging": "Paging",
                "scroller": "Scroll Position",
                "search": "Search",
                "searchBuilder": "SearchBuilder",
                "searchPanes": "SearchPanes",
                "select": "Select",
                "title": "Create New State",
                "toggleLabel": "Include:"
            },
            "duplicateError": "A state with this name already exists.",
            "emptyError": "Name cannot be empty.",
            "emptyStates": "No saved states",
            "removeConfirm": "Are you sure you want to remove %s?",
            "removeError": "Failed to remove state.",
            "removeJoiner": " and ",
            "removeSubmit": "Remove",
            "removeTitle": "Remove State",
            "renameButton": "Rename",
            "renameLabel": "New Name for %s:",
            "renameTitle": "Rename State"
        },
        "modalCloseButton": true,
        "remove": true,
        "rename": true,
        "save": true,
        "saveState": {
            "colReorder": true,
            "columns": {
                "search": true,
                "visible": true
            },
            "length": true,
            "order": true,
            "paging": true,
            "scroller": true,
            "search": true,
            "searchBuilder": true,
            "searchPanes": true,
            "select": true
        },
        "splitSecondaries": [
            "updateState",
            "renameState",
            "removeState"
        ],
        "toggle": {
            "colReorder": false,
            "columns": {
                "search": false,
                "visible": false
            },
            "length": false,
            "order": false,
            "paging": false,
            "scroller": false,
            "search": false,
            "searchBuilder": false,
            "searchPanes": false,
            "select": false
        },
        "preDefined": {}
    }
}

mnk

no one get this situation ?