Answers

• kthorngren Posts: 21,344Questions: 26Answers: 4,954

  April 15

  Do you have processing set true? See this example. When the search request is sent to the server the processing indicator is shown.

  If you want to show your own spinner then maybe the processing event will do what you want.

  Kevin
• holstyBoy Posts: 9Questions: 3Answers: 0

  April 18

  hi kevin,

  i´m for now on client-side operation as i am using a google sheet as the javascript environment.

  the processing event fires and i can capture BUT it does not fire if i have input on my search ...

  my best guess is that i cannot implement server-side ajax...
  if you want to you may have a look here: https://hopto.selfhost.co/teilekatalog/

  any tipps, hints are very much apprechiated
  cheers
  tomek
• allan Posts: 63,535Questions: 1Answers: 10,475 Site admin

  April 18

  Try this:

  let table = $('#teileKatalog').DataTable();
  
  $('div.dt-search input').on('keypress', function (e) {
      if (e.key === 'Enter') {
          table
              .one('draw', function () {
                  table.processing(false);
              })
              .processing(true);
      }
  });
  

  That uses the DataTables processing() display.

  The built in search feature doesn't currently use the processing display. It perhaps should to allow for this sort of thing. I'll probably include an option for that in future I think.

  Allan
• holstyBoy Posts: 9Questions: 3Answers: 0

  April 18

  hi allan, it seems i'm too blond for getting it to work.... here is my main function being called after the dom loading:

  ` function afterDataLoaded(result){
  document.getElementById("progressBar").classList.add("invisible");
  const headers = result.headers.map(header => {
  return {title: header};
  });

      if ( $.fn.dataTable.isDataTable( '#teileKatalog' ) ) {
          table = $('#teileKatalog').DataTable();
      }
      else {
          table = $('#teileKatalog').DataTable( {
            language: {url: 'https://cdn.datatables.net/plug-ins/1.11.5/i18n/de-DE.json'},
            processing: true,
            order: [],
            search: {return: true},
            layout: {
                topStart: {
                    pageLength: {
                        menu: [ 5, 10, 25, 50, 100 ]
                    }
                },
            },
            columns: headers,
            data: result.data
          });
      }
      $('div.dt-search input').on('keypress', function (e) {
        console.log(e);
          if (e.key === 'Enter') {
              table
                  .one('draw', function () {
                      table.processing(false);
                  })
                  .processing(true);
          }
      });
    }
  

  `
  i do not get any "progressing" info nor an error message. it just worked the same as before, meaning not telling the user that is needs some time for filtering. i do not do any server side ajax whatsoever coding.

  would there be anyway a chance to show a progress indicator? i did exercisse with my own search input field, having the search input given to the datatable function to search and draw but even on that exercise my own spinner was not popping up...

  cheers & grateful for another thought ...
  cheers
• kthorngren Posts: 21,344Questions: 26Answers: 4,954

  April 18

  Allan's code does work. The problem is the language.url option is an asynchronous fetch of the language file. Datatables doesn't complete its initialization until the language file is returned. This means the keypress event handler executes before the table variable is assigned the Datatables API. Move it into initComplete. I built this example based on your code:
  https://live.datatables.net/niyapeji/1/edit

  I noticed that hitting enter with an empty input causes the processing animation to remain because there is no draw event fired since there is no search taking place. Added $('div.dt-search input').val().length to the if statement to stop this issue.

  Kevin
• kthorngren Posts: 21,344Questions: 26Answers: 4,954

  April 18

  Actually $('div.dt-search input').val().length isn't the correct solution. A comparison of the input to the current search term is needed. If they are the same no search will take place. Updated example:
  https://live.datatables.net/tafawiba/1/edit

  Kevin
• holstyBoy Posts: 9Questions: 3Answers: 0

  April 18

  hi kevin,

  its working like a charme!!!!!! i owe you a glass of milk
  this goes true for allen as well!!!!

  cheers & thank you sooo much!!!!!
  tomek
• allan Posts: 63,535Questions: 1Answers: 10,475 Site admin

  June 11

  Just a quick note in this thread to say that I've committed a change on the 2.1 branch to add a new search.processing option to search to get a processing indicator while the search is happening.

  Allan