ColumnControl - Clear Search button not enabling on search
ColumnControl - Clear Search button not enabling on search
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!
Replies
As a workaround, I just created a custom reset button that is always enabled.
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
@allan Yes, the example is working fine. I will try to have a test case link when I get the chance.
Thanks!
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.
@REJIS - If you can link to a page showing the issue I can take a look into it.
Allan
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.
Interesting. On this page if I pop the console open and run:
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
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.
column().columnControl.searchClear()orcolumns().columnControl.searchClear()is the official API to clear a search term.Allan
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.
Try adding
draw()like this:or for all columns:
Kevin