Clear search input after hiding column
Clear search input after hiding column
CaptainNemo
Posts: 13Questions: 6Answers: 1
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
This question has an accepted answers - jump to answer
Answers
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
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.
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 usecolumn().search()in a loop. You most definitely don't want to calldraw()in thedrawCallbackas that could introduce an infinite loop. And I believedrawCallbackwould run too later, after the search has been performed.Instead use the
column-visibilityto 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-visibilitywill fire and clear the search values of the hidden columns. Then calldraw()once the loop is complete. You will need to add the code to clear the input.Kevin
Update on Datatables 1.13.1 is the solution