How do you add a "Clear" button for the global search box?

kprohaszka

I would like to have an "X" or "Clear" button that resets the default global search box when users type in it. Is there an easy way to do this? In my screenshot the box in question is the "Search all columns" field.

kthorngren

Start typing and you should see the X to clear the search. At least that happens in this example:

If this doesn't work for you then please provide a link to a test case showing the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

allan

The X shown in your screenshot is OS / browser specific Kevin. DataTables doesn't add that specifically - I think it is a Windows / Edge thing? Possibly Chrome too (i.e. its a Blink feature). What are you using? And @kprohaszka, what OS / browser are you using yourself?

The way to clear the global search is with search() and pass in an empty string.

Allan

kprohaszka

I am using Windows 11 and Google Chrome, and I have also tested in Firefox and Edge. Typing in the Search box does not make "X" appear for me in any browser.

So I will have to hard code in a clear button? I did something similar for the "Reset ALL Filters" button next to the alphabet bar, would the code be comparable for the global search?

 // "Show All" button click handler (clears all filters)
    $('#show-all').on('click', function() {
        // Clear global and column-specific DataTable searches
        table.search('').columns().search('').draw();
    
        // Reset department dropdown
        $('#department-filter').val('');
    
        // Remove 'active' class from any selected alphabet button
        $('.alphabet-button').removeClass('active');
    }); //end show-all handler

kthorngren

The Datatables global search uses <input type="search">. This doc section explains that some browsers may show the clear icon.

table.search('').draw();

This will clear the global search input and the search.

table.columns().search('').draw();

This will clear all the column searches.

What you have on line 4 will clear both. If you want to just clear the global search then use table.search('').draw();.

You might be able to use layout to place the clear button next to the search input. See this example for techniques to add custom elements using layout.

Kevin

kprohaszka

Thanks Kevin, I think that is what I was looking for!