stateSave with Individual column searching

adsafcgr

having problem when I am using the code provided as example for Individual column searching, with stateSave: true,

The code I used:

new DataTable('#example', {
    initComplete: function () {
        this.api()
            .columns()
            .every(function () {
                let column = this;
                let title = column.footer().textContent;
 
                // Create input element
                let input = document.createElement('input');
                input.placeholder = title;
                column.footer().replaceChildren(input);
 
                // Event listener for user input
                input.addEventListener('keyup', () => {
                    if (column.search() !== this.value) {
                        column.search(input.value).draw();
                    }
                });
            });
    },
    colReorder: true,
    fixedHeader: true,
    dom: 'Bfrtip',
    stateSave: true,
    buttons: [
        {
            extend: 'colvis',
            collectionLayout: 'fixed columns',
            collectionTitle: 'Column visibility control'
        },
        "copy", "removeAllStates"
    ]
})
.on('click', 'tbody tr', function (e) {
    e.currentTarget.classList.toggle('selected');
});
 

The problem is, when I search for a text in a specific column, the state is saved.
When I reload the page, the text is gone from the search field (Not the main search field, individual column field)
Now there is no way to reset the state.

How do I solve this issue?

colin

The column searches aren't part of the internal DataTables configuration, it's something added in by your code. As such, if you want those values stored, you need to add that to the saved data and restore it upon load.

This example is doing just that. Could you look at that, please, and see if it helps. If it's still not working for you, please can you update my example, or link to your page, so that we can see the problem.
,

Colin