Clear search input after hiding column

CaptainNemo

Hello,

I use extension ColVis and "column search" functionnality on specific column (a classic input text in header).
All columns could be hidden by a dropdown.

My goal : I want to clear the input of a column hidden by user

Example :
Typing "test" in column C : Data filtered with "test" OK
Typing "hello" in column F : Data filtered with "test" AND "hello" OK
Hide column C : Data always filtered with "test" AND "hello" : KO

I make a clear in drawCallback, but it doesn't work

    $('#dataList').on( 'column-visibility.dt', function ( e, settings, column, state ) {
        //Trigger draw event when a column is hidden/displayed
        $($.fn.dataTable.tables(true)).DataTable().rows().invalidate().draw();
        $($.fn.dataTable.tables(true)).DataTable().columns.adjust();
    } );

$.extend( true, $.fn.dataTable.defaults, {
    "search": true,
    "searching": true,
    "stateSave": true,
    drawCallback: function(){
        var table = this.api();
        var container = table.table().container();
        //Loop on each thead tr
        $( container ).find("thead tr").each( function () {
            //Loop on each column of headers
            $('th', this).each( function (i) {
                //If column is hidden, we clear the input filter
                if(table.column(i).visible() === false){
                    table.column(i).search( null ).draw();
                }
                //On each input, if user type something, we get the value and trigger the search() method
                $( 'input', this ).off().on( 'change', function () {
                    var value = this.value;
                    if ( table.column(i).visible() === true && table.column(i).search() !== value) {
                        table.column(i).search( value ).draw();
                    }
                } );
            })
        });
    }
} );

It's a datatable ajax sourced. When i debug the object sent to the server, i see every column with the property "value" filled, in despite of the visibility.

Thanks for your help

kthorngren

There is a lot going on there and its difficult to debug your code snippet. Please provide a link to your page or a test case showing the issue so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Sounds like you are using Server Side Processing. You can build a test case using one of the Server Side Processing templates found here:
https://datatables.net/manual/tech-notes/9#Server-side-processing

Kevin

CaptainNemo

I understand the complexity to debug my issue with only this part of code..
Unfortunately, it's an old code, with bad practices, dispatched in many JS files..., but i'll do my best to clarify this post.

kthorngren

Unfortunately, it's an old code, with bad practices

That happens to all of us. Its humbling to go back and look at old code I've written to see how bad it is

Maybe it would be easier to restructure your code. First problem is you probably don''t want to call draw() every time you use column().search() in a loop. You most definitely don't want to call draw() in the drawCallback as that could introduce an infinite loop. And I believe drawCallback would run too later, after the search has been performed.

Instead use the column-visibility to loop all the hidden columns, clear the input and set the column search to an empty string. I created a simple example:
http://live.datatables.net/karanita/1/edit

Click the button to hide column 1. The column-visibility will fire and clear the search values of the hidden columns. Then call draw() once the loop is complete. You will need to add the code to clear the input.

Kevin

CaptainNemo

Update on Datatables 1.13.1 is the solution