Answers

• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  January 2023 Answer ✓

  Sounds like you want a date range search. See this example. See if this date range search plugin will work.

  If you still need help please build a test case with example values that you want to search.
  https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

  Kevin
• neha6 Posts: 3Questions: 1Answers: 0

  January 2023 edited January 2023

  Good morning,
  thanks for your help! it works well!

  Another question: is it possible to reload the dataTable without having to press the enter button when the user deletes the entered dates?
  Like, for example, with the input 'search' of the dataTable.

  Here's the search results:

  

  Here's the table not reload:

  

  Here's my script:

  var minDate, maxDate;

      // Custom filtering function which will search data in column four between two values
      $.fn.dataTable.ext.search.push(
          function (settings, data, dataIndex) {
              var min = minDate.val();
              var max = maxDate.val();
              var dateEntree = new Date(data[7]);
              var dateSortie = new Date(data[8]);
  
              if (
                  (min === null) ||
                  (max === null) ||
                  (dateSortie >= min && dateEntree <= max)
              ) {
                  return true;
              }
              return false;
          }
      );
  
      $(document).ready(function () {
          // Create date inputs
          minDate = new DateTime($('#min'), {
              format: 'DD-MM-yyyy'
          });
          maxDate = new DateTime($('#max'), {
              format: 'DD-MM-yyyy'
          });
  
          var table = $('#dataTable').DataTable({
              language: {
                  url: "https://cdn.datatables.net/plug-ins/1.13.1/i18n/fr-FR.json"
              },
              columnDefs: [
                  {
                      target: 7,
                      visible: true,
                      searchable: true
                  },
                  {
                      target: 8,
                      visible: true,
                      searchable: true,
                  },
              ],
          });
  
          // Refilter the table
          $('#min, #max').on('change', function () {
              table.draw();
          });
  
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  January 2023 Answer ✓

  Looks like you are using the DatTime. One option is to add a clear button using buttons.clear. If the user is backspacing maybe create a keyup event and in the event when the input is empty call table.draw();.

  Kevin
• neha6 Posts: 3Questions: 1Answers: 0

  January 2023

  Thank you for your advice!
  I found an alternative solution. I'll post my solution if it can help someone else.

  here's my script when we delete the content of the date fields

   // Refilter the table
       $('#min, #max').on('change', function () {
            table.draw();
  
        // Reload the dataTable on a delete event
            if ($('#min').val() || $('#max').val) {
                 $('#min, #max').keyup(function(e){
                      if(e.keyCode == 46 || e.keyCode == 8) {
                          table.draw();
                      }
                  });
              }
         });
  
• kthorngren Posts: 21,330Questions: 26Answers: 4,951

  January 2023

  I think you will want to move the keyup event handler outside the change event handler. Otherwise you will end up creating additional event handlers each time the code in line 7 is reached. Something like this:

  // Refilter the table
      $('#min, #max').on('change', function () {
           table.draw();
         });
  
       // Reload the dataTable on a delete event
                $('#min, #max').keyup(function(e){
                     if(e.keyCode == 46 || e.keyCode == 8) {
                         table.draw();
                     }
                 });
  

  Kevin