columnControl extension - debouncing and visual cues questions

MichelR

Hi,

It had been a while since I used DataTables. Used them for maybe 6 years at work, but not since retiring a little over a year ago. I'm now working on a personal project and DataTables seems like the right fit for a few pages. I was pleasantly surprised to run into the new columnControl extension. That would have been a much cleaner solution than what we came up with at work in the past!

So I've got the search inputs and some searchLists up and running just fine, but there are a couple of gotchas. I've been working on getting around (1) for the past few days and tried just about everything (even trying ChatGPT and Gemini to help, but that was a bust - they get confused really quickly - haha!) Lots of Google searches and browsing through the forum here as well.

1) Has anyone gotten debouncing to work for the columnControl search inputs? I use server-side processing and currently the cc inputs trigger a search with every keystroke. I tried unbinding events and binding new ones, but somehow there's "something somewhere" that's still triggering the search, no matter what I do. The only thing that came close to working was replacing the inputs with new ones, but then I lost the benefit of the clear buttons working properly. Things were just getting too messy.

2) I've read through the docs and examples and maybe I missed something, but is there a way to turn on some "visual cues" as to which filters are currently active in the table, like we have with the sort icons? While the text in inputs is obvious, there's no indicator that items may be selected in one of the searchLists. I can probably figure out a way to do this, but I thought I'd ask if I missed something in the docs before spending time on this.

Thanks!
Michel

Wernfried

For your second issue, do you mean this https://datatables.net/forums/discussion/81570

MichelR

Ah yes, thank you. I switched to the nightly (still in development for a while, so using a nightly isn't an issue) and it's now showing as active (a little subtle, but it works). Also nice to be able to clear the search by hitting the icon next to it.

allan

1) Has anyone gotten debouncing to work for the columnControl search inputs?

I suspect you'll have a bit of a nightmare there if you try to unbind and rebind event handlers. It is very likely that this is something that I should bake into the library rather than having it patched externally.

This function is probably the place to add it. I'll have a look on Monday and see what I can do.

Allan

Wernfried

Regarding the search icons where it is hard to distinct them and see whether search is active or not.

Most of the CC icons you can customize easily by replacing the SVG data in DataTable.ColumnControl.icons array. However, this option is not available for the search icon. My solution is this one:

const icon_search_off = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">'
  + '<path fill="currentColor" d="M15.5 14h-.79l-.28-.27A6.47 6.47 0 0 0 16 9.5A6.5 6.5 0 0 0 9.5 3C6.08 3 3.28 5.64 3.03 9h2.02C5.3 6.75 7.18 5 9.5 5C11.99 5 14 7.01 14 9.5S11.99 14 9.5 14c-.17 0-.33-.03-.5-.05v2.02c.17.02.33.03.5.03c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19z" />'
  + '<path fill="currentColor" d="M6.47 10.82L4 13.29l-2.47-2.47l-.71.71L3.29 14L.82 16.47l.71.71L4 14.71l2.47 2.47l.71-.71L4.71 14l2.47-2.47z" />'
  + '</svg>';

const icon_search = '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24">'
  + '<path fill="currentColor" d="M13.04 10q-.6.375-1.14.9c-.33.34-.63.71-.87 1.1H8v-1.5c0-.28.22-.5.5-.5zM20 8H2V2h18zm-2-4H4v2h14zM5 18V9H3v11h8.82a6.4 6.4 0 0 1-1.32-2zm18.39 3L22 22.39l-3.12-3.07c-.69.43-1.51.68-2.38.68c-2.5 0-4.5-2-4.5-4.5s2-4.5 4.5-4.5s4.5 2 4.5 4.5c0 .88-.25 1.71-.69 2.4zM19 15.5a2.5 2.5 0 0 0-5 0a2.5 2.5 0 0 0 5 0" />'
  + '</svg>';


$("#dataTable").on('draw.dt', function (e, settings) {
   // Use custom search icons
   e.dt.columns().every(function () {
      const button = $(this.header()).find('.dtcc-button_dropdown');
      let icon = button.find('span.dtcc-button-icon');
      icon.html(button.hasClass('dtcc-button_active') ? icon_search : icon_search_off);
      button.find('span.dtcc-button-state').html('');
  });

});

I take my icons from Iconify

Wernfried

allan

You should be able to change the SVG in DataTable.ColumnControl.icons.search. This is the -content searchDropdown content type I presume?

Allan

Wernfried

Yes, you can change the DataTable.ColumnControl.icons.search or DataTable.ColumnControl.icons.menu (for dropdown) icon. But when search active or not, the icon is just a little lighter or darker. Using different icons give much better visibility on active or non-active search on the column.

Wernfried

MichelR

@allan Definitely was a nightmare. Lots of cursing, but just like when they asked me to do weird things at work with DataTables, I learned quite a bit along the way, especially since columnControl was completely new to me. And getting weird behaviour as a result of my attempts helped me notice some issues with the data in my database. I call both of these things a win.

Not a huge deal at the moment as I'm mostly working in my local environment and it's pretty fast, but when I test the deployed version, it can be brutal in terms of response time (this is just a hobby, so I'm hosted on a shared server - good speed for normal processing, not so much for this).

I was going to look at the source code the other day, but by then my brain had shut down. Also I only used TypeScript very sparingly, some 7-8 years ago.

Thanks!

MichelR

@Wernfried I'm going to look at your solution later, thanks! The other day I just went the lazy route and did this to change the icon to red:

.dtcc-button_active > .dtcc-button-icon {
    color: red !important;
}

Doesn't work without !important.

allan

@Wernfried - Good point. I'll look into providing a way (or perhaps using by default) a modified icon for when it is active.

Allan

allan

I've added a new iconActive option to the dropdown content type, and for searchDropdown it will now show a search magnifying glass with a tick in it when active:

This will be in the next major release of ColumnControl which will be alongside DataTables 3 and the other extensions.

Allan