State Saving with individual column filtering

Question

I am using individual column filtering in data table along with stateSave: true. To perform column filtering I am using column filter.js.

I am facing one issue If I filtered data in the column and reload the page it maintains state for table only but textbox becomes empty. On page refresh, the state remains same for the table and for searching textbox too.

On page refresh, the textbox value should be shown, but instead of that, text box becomes empty.

Please, someone, let me know how can I maintain textbox value along with table state.

I am using this code

jQuery('#Gridtable').dataTable({
    stateSave: true,                                
    "aLengthMenu": [[10, 25, 50, 100, 500, -1], [10, 25, 50, 100, 500, "All"]],
    "iDisplayLength": 10,
}).columnFilter({
    sPlaceHolder: "head:after",
    aoColumns: [
        { type: "text" },
        { type: "text" },
        { type: "text" },
    ]
});

Answer 1

"stateLoaded": function stateLoadedCallback(settings, state) {
    state.columns.forEach(function (column, index) {
       $('#' + settings.sTableId + '-head-filter-' + index).val(column.search.search);
    });
}

Just put values from your state into the fields