[Column filters, save state] Can't remove text from input

Thoniur

Hello DataTables community!

I would like to kindly ask for a guidance with the DataTables , Im new with 'em.

The scenario:
Im using a DataTables with the server-side option and a column filtering plugin with slightly custom state saving.
The state saving / loading is made thru the ajax/DB - I'm having the filters active until the user decides to remove them manually.
Everything works like a charm thanks to the great API, but there is one thing I can't figure out:
When I try to remove the string from the column inputs, the text is "returned back" to input field (just like CTRL+Z effect). However, the DataTable register the text change and applies the new value.

Unfortunately I can't provide access to the src, I can provide only a pseudocode:

var table = $('#datatable').DataTable({
    processing: true,
    serverSide: true,
    dom: 'lrtip',
    stateSave: true,
    orderCellsTop: true,
    ajax: { /* hidden */  },
    initComplete: function () {
        this.api().columns().every( function(i, j) {

            // Get header ref.
            var header = $('#datatable thead tr:eq(1) th').eq(i);

            $(header).html('<input type="text" />');
            
            // Text change event
            $( 'input', $(target) ).on( 'keyup change', function () {
                if ( table.column(i).search() !== this.value )
                {
                    table.column(i).search( this.value ).draw();
                }
            });
         });
    },

    stateSaveCallback: function ( settings, data ) {
        var table = this;
        
        $.ajax( {
            url: '/get.php',
            data: data,
            dataType: 'json',
            type: 'POST',
            success: function (msg) {
                /* Other code */

               var tabState = table.api().state.loaded();
                
                // Now here Im putting the search value to the text input, could be wrong
                table.api().columns().every( function (i, j) {
                    var head = $('#datatab thead tr:eq(1) th').eq(i);
                    var colSearch = state.columns[i].search;
                    
                    if ( colSearch.search )
                    {
                        $(head).find('input').val(colSearch.search);
                    }
                });
            }
        });
    },

    stateLoadCallback: function ( settings, callback ) {
        var table = this;

        $.ajax( {
            url: '/set.php',
            data: /* custom data here */,
            dataType: 'json',
            type: 'POST',
            success: function (json) {
                callback( json );
            };
        });
    },
});

Debugger code: amuhop

Thank you for any relevant hint.

kthorngren

Looks like you are updating the search inputs each time the state is saved via stateSaveCallback. Maybe you will want to move that code to stateLoadParams so it executes only when the state is loaded.

When I try to remove the string from the column inputs, the text is "returned back" to input field (just like CTRL+Z effect).

I might be missing the code but how are you doing this? If you clear an input likely you want to clear the column search with something like this:

table.column(i).search( "" ).draw();

Kevin

Thoniur

Hi @kthorngren and thank you for your reply!

I made the changes and moved the code to stateLoadParams , however this results into a state that the search input is empty after the page is reloaded, while the filter is still apllied.
The problem with this solution may be the fact that the stateLoadParams is called before the initComplete (here I'm creating the pseudo-header row with the text inputs).
Should I put this part of code into the stateLoadParams or it's the wrong path to use DataTables?

If you clear an input likely you want to clear the column search

This actually happens (based on the logs and DB), the one and only issue is the UI problem - the text cannot be removed from the <input type="text"> by pressing the Backspace key, as it returns back immediately after ANY key is pressed.

Thoniur

colin

I'm not clear what would cause this. It would help if we could see the issue. We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

Cheers,

Colin

Thoniur

I'm sorry for my rude silence, unfortunately, I didn't have time to make a test case.
Now here is all set: http://dt.thoniur.eu/

I have one more question related to this example - when there is a <select> column filter, it loads only a few of the available options, which is undesirable. I guess there is an option to change this behavior (based on server-side loading I guess)?

Regards,
Thoniur

colin

Yep, as you say, it's because of serverSide - so only the values on that page would be known. There a few threads discussing this, such as here, that may get you going,

Colin

Thoniur

Good to know, thank you!

In the meantime, the original problem was solved by putting the filter header row init process into the stateLoadCallback, which works perfect.
The thread may be marked as solved.

Regards,
Thoniur