how to determine that on the input search field "keyboard return" has been fired...

holstyBoy

i do maintain a large dataset of about 120'000 records, so the default option while typing away and search is no option for me. i did set the table option = search: {return: true}.

well it's working but after hitting return sometimes the search takes long as well and i want to show a "spinner" while its filtering. i give it serveral tries but can't figure out either:

• what the right event would be to show the spinner after "return" has been keyboarded till the event draw is happening
• to grab the input field by its id (tried to grab "dt-search-0"

any idea ,maybe even help?

cheers

kthorngren

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

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

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 -feature 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

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

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

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

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