Answers

• allan Posts: 63,161Questions: 1Answers: 10,406 Site admin

  February 2017 Answer ✓

  Possibly your best option is to change the column filtering code that you are using to listen for a return key and only at that point execute the column().search() method. e.keyCode == 13 should do it (where e is the event).

  Allan
• mmcnair80 Posts: 83Questions: 21Answers: 7

  February 2017 edited February 2017

  @allan
  Here is how I am currently initializing my DataTables:

      $(document).ready(function ()
      {
          // Setup - add a text input to each footer cell
          $('#DataTable tfoot th').each(function ()
          {
              var title = $(this).text();
              $(this).html('<input type="text" placeholder="Search ' + title + '" />');
          });
  
          var table = $('#DataTable').DataTable({
              "lengthMenu": [[25, 50, 75, 100, 150, -1], [25, 50, 75, 100, 150, 'All']],
              "dom": '<"top"Bifpl<"clear">>rt<"bottom"ip<"clear">>',
              "buttons": [{
                  extend: 'collection',
                  text: 'Export',
                  buttons: ['export', { extend: 'csv',
                      text: 'Export All To CSV',
                      action: function (e, dt, node, config)
                      {
                          window.location.href = './ServerSide.php?ExportToCSV=Yes';
                      } 
                  }, 'csv', 'pdf', { extend: 'excel',
                      text: 'Export Current Page',
                      exportOptions: {
                          modifier: {
                              page: 'current'
                          }
                      },
                      customize: function (xlsx)
                      {
                          var sheet = xlsx.xl.worksheets['sheet1.xml'];
                          $('row:first c', sheet).attr('s', '7');
                      }
                  }]
              }
              ],
              "fixedHeader": {
                  header: true,
                  footer: true
              },
              "select": true,
              "processing": true,
              "serverSide": true,
              "ajax": {
                  "url": "./ServerSide.php",
                  "type": "POST"
              },
              stateSave: true,
              columnDefs: [{ visible: false, targets: 0}],
              initComplete: function ()
              {
                  var api = this.api();
  
                  // Apply the search
                  api.columns().every(function ()
                  {
                      var that = this;
  
                      $('input', this.footer()).on('keyup change', function ()
                      {
                          if (that.search() !== this.value)
                          {
                              that
                                .search(this.value)
                                .draw();
                          }
                      });
                  });
              }
          });
      });
  

  So you are saying that I should change the

  $('input', this.footer()).on('keyup change', function() to

  $('input', this.footer()).on('keyup change', function(e)
  and add after that something like

  if (that.search() !== this.value & e.keyCode == 13)?
• allan Posts: 63,161Questions: 1Answers: 10,406 Site admin

  February 2017

  Basically yes
• mmcnair80 Posts: 83Questions: 21Answers: 7

  March 2017

  This did work. The search now waits for the user to hit Enter.