Column search filters not reloading search query when state save is true

2312hannah

Hi,

I've set up a datatable that adds search filters to the column headers and it's working great, but when I introduced stateSave I noticed that if I filtered the table and then went off to another page and returned, the data remained filtered but the column search filters were empty so it looked as though the table just wasn't loading any data.

This is the code I am using to generate the table:

$(document).ready(function () {
// Setup - add a text input to each footer cell
$('#usersTable thead tr')
.clone(true)
.addClass('filters')
.appendTo('#usersTable thead');

    var table = $('#usersTable').DataTable({
        lengthChange: false,
        info: false,
        stateSave: true,
        orderCellsTop: true,
        fixedHeader: true,
        columnDefs: [
                {
                    targets: [6],
                    sortable: false,
                }
            ],
        initComplete: function () {
            var api = this.api();

            // For each column
            api
                .columns()
                .eq(0)
                .each(function (colIdx) {
                    if ([6].includes(colIdx)) {
                            var cell = $('.filtersCpdEventsWhole th').eq(
                                $(api.column(colIdx).header()).index()
                            );
                            $(cell).html('');
                        } else {

                    // Set the header cell to contain the input element
                    var cell = $('.filters th').eq(
                        $(api.column(colIdx).header()).index()
                    );
                    var title = $(cell).text();
                    $(cell).html('<input type="text" />');
                    // On every keypress in this input
                    $(
                        'input',
                        $('.filters th').eq($(api.column(colIdx).header()).index())
                    )
                        .off('keyup change')
                        .on('change', function (e) {
                            // Get the search value
                            $(this).attr('title', $(this).val());
                            var regexr = '({search})'; //$(this).parents('th').find('select').val();
                            var cursorPosition = this.selectionStart;
                            // Search the column for that value
                            api
                                .column(colIdx)
                                .search(
                                    this.value != ''
                                        ? regexr.replace('{search}', '(((' + this.value + ')))')
                                        : '',
                                    this.value != '',
                                    this.value == ''
                                )
                                .draw();
                        })
                        .on('keyup', function (e) {
                            e.stopPropagation();

                            $(this).trigger('change');
                            $(this)
                                .focus()[0]
                                .setSelectionRange(cursorPosition, cursorPosition);
                        });
                        }
                });
        },
    });
});

kthorngren

There are lots of threads with this question. See if Allan's example in this thread helps.

Kevin