ColumnControl - Clear Search button not enabling on search

yajra

Using the same example as https://datatables.net/extensions/columncontrol/examples/search/clearAll.html, the clear button doesn't get enabled when doing a column search.

dt.columns().every(function () {
    // this always returns null
    if (this.search.fixed('dtcc') || this.search.fixed('dtcc-list')) {
        enabled = true;
    }
});

Any advice on what might have caused the issue? Thanks!

yajra

As a workaround, I just created a custom reset button that is always enabled.

$.fn.DataTable.ext.buttons.reset = {
    name: 'reset',
    className: 'btn-secondary',
    titleAttr: 'Reset',
    text: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-rotate-ccw"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>',
    action: function (e, dt, button, config) {
        dt.search('');
        dt.columns().columnControl.searchClear();
        dt.draw();
    }
};

allan

Hi,

Just to confirm - the example appears to be working okay. Is it for you?

Assuming that is the case, can you link to a page showing the issue?

Allan

yajra

@allan Yes, the example is working fine. I will try to have a test case link when I get the chance.

Thanks!

REJIS

When you type in a column filter and the button doesn't enable...does it actually filter? If you type something then click the x in the column filter does it start working? I'm currently having an issue where the button doesn't enable too until I type something and click the x. I know when I originally started testing out the column filters they were working just like the examples. I haven't been able to figure out what is going on yet.

allan

@REJIS - If you can link to a page showing the issue I can take a look into it.

Allan

REJIS

Well, I tracked down my problem, so maybe it will give some ideas or solutions for you:

Previously I had implemented my own filter inputs in the footer and an event handler to capture the input event for them and called search() for the column. I went through and replaced them all with ColumnControl's implementation, but I missed some code:

My Table HTML is empty, data in the DataTable definition is null, and I define the columns with their title/data property names/classNames/etc in the JavaScript definition. I then usually perform a search to a web service that returns a JSON object that I then load into the data of the table (Clearing the data first) and call draw().

They can call this multiple times, so if someone had a filter string typed into the footer the data would be filtered on them the next time they search and they may not realize it. I had a line in there that sets the value of all inputs in the footer to an empty string and triggered an input event which would call search with an empty string for all the columns. Apparently the new ColumnControl doesn't like this. Once I took that out everything works as it should again.

allan

Interesting. On this page if I pop the console open and run:

$('#example tfoot td:eq(1) input').val('Sales').trigger('input') 

then it won't filter the column or perform any actions. The events used for ColumnControl are all native JS, rather than jQuery, which is why that is the case. I'd need to introduce an API to be able to set the values for the search terms if that is what is needed.

Allan

REJIS

I think I just need to call whatever the new Clear button does instead. I think I saw mention of it in another thread, but there may have been a warning with it that the name may change.

allan

column().columnControl.searchClear() or columns().columnControl.searchClear() is the official API to clear a search term.

Allan

REJIS

Hmm. That cleared out the text in the inputs, but the table itself still remained filtered and the Clear Button enabled. If I click the Clear button it works though.

kthorngren

Try adding draw() like this:

table.column(0).columnControl.searchClear().draw();

or for all columns:

table.columns().columnControl.searchClear().draw();

Kevin