How to update stateRestore list of saved states after add/remove/rename

zeckstein

I'm loading table data via Ajax and I also am saving custom states locally via ajax. Both are working fine. I'm using this callback for the stateSave/Restore handling:

// Custom function to handle Ajax for state saving and loading
    function idwiz_handle_states(data, callback) {
        const currentTime = Date.now();

        if (currentTime - lastCallTime < debounceTime) {
            console.log("Function call debounced");
            return;
        }

        lastCallTime = currentTime;
        console.log("idwiz_handle_states called with data:", data);
        
        // Include the action type in the data to be sent to the server
        var ajaxData = {
            dataTableAction: data.action, // This is the DataTables action like "load" or "save"
            stateRestore: data.stateRestore
        };

        idemailwiz_do_ajax(
            'idwiz_handle_dt_states',
            idAjax_data_tables.nonce, 
            ajaxData, 
            function(response) {
                if (response.success) {
                    if (data.action == 'load') {              
                        callback(response.data); 
                    } else {
                        console.log('ajax reload table');
                        table.ajax.reload();
                    }
                } else {
                    console.log('Ajax error:', response); 
                }

                console.log(response);
            }, 
            function(error) {
                console.log('Error:', error);
                console.log('Status:', error.status);
                console.log('Status Text:', error.statusText);
                console.log('Response Text:', error.responseText);
            }
        );
    }

(If you're curious about the debounce part, refer to my other question here)

This function is being called by the button, as per the documentation:

buttons: [
            {
                extend: 'createState',
                text: 'Create View',
                attr: {
                'title': 'Create View',
                },
                config: {    
                creationModal: true,
                }
            },
            {
                extend: 'savedStates',
                text: 'Saved Views',
                className: 'saved-views',
                background: false,
                attr: {
                    'title': 'Saved Views',
                },
                config: {
                    ajax: function (data, callback) {
                        idwiz_handle_states(data, callback);
                    }
                    
                }
            }
            ]

After an action (anything but load) I'm trying to get the button(s) to redraw so that the list of saved states is updated without a page refresh.

table.ajax.reload(); is working to refresh the data (which I don't really need) but it doesn't seem to refresh the other dom elements.

I also tried .draw but that didn't seem to do the trick either.

Is there a standard way to do this when using ajax for saving/loading states?