Replies

• Wernfried Posts: 24Questions: 5Answers: 0

  January 23 edited January 23

  For your second issue, do you mean this https://datatables.net/forums/discussion/81570
• MichelR Posts: 12Questions: 2Answers: 0

  January 23

  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 Posts: 65,506Questions: 1Answers: 10,880 Site admin

  January 24

  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 Posts: 24Questions: 5Answers: 0

  January 24

  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 Posts: 65,506Questions: 1Answers: 10,880 Site admin

  January 24

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

  Allan
• Wernfried Posts: 24Questions: 5Answers: 0

  January 24

  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 Posts: 12Questions: 2Answers: 0

  January 25

  @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 Posts: 12Questions: 2Answers: 0

  January 25 edited January 25

  @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 Posts: 65,506Questions: 1Answers: 10,880 Site admin

  January 26

  @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 Posts: 65,506Questions: 1Answers: 10,880 Site admin

  January 26

  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