Replies

• yajra Posts: 25Questions: 1Answers: 1

  September 21

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

  September 22

  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 Posts: 25Questions: 1Answers: 1

  September 25

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

  Thanks!
• REJIS Posts: 38Questions: 5Answers: 0

  October 8

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

  October 8

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

  Allan
• REJIS Posts: 38Questions: 5Answers: 0

  October 8

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

  October 9

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

  October 9

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

  October 9

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

  Allan
• REJIS Posts: 38Questions: 5Answers: 0

  October 9

  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 Posts: 22,299Questions: 26Answers: 5,127

  October 9 edited October 9

  Try adding draw() like this:

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

  or for all columns:

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

  Kevin