how to determine that on the input search field "keyboard return" has been fired...
how to determine that on the input search field "keyboard return" has been fired...
![holstyBoy](https://secure.gravatar.com/avatar/03fc05b40b0bbacb7d6ca7b3e0d5961c/?default=https%3A%2F%2Fvanillicon.com%2F03fc05b40b0bbacb7d6ca7b3e0d5961c_200.png&rating=g&size=120)
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
Answers
Do you have
processing
settrue
? 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
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
Try this:
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
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};
});
`
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
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 thekeypress
event handler executes before thetable
variable is assigned the Datatables API. Move it intoinitComplete
. 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
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
hi kevin,
its working like a charme!!!!!! i owe you a glass of milk![B) B)](https://datatables.net/forums/resources/emoji/sunglasses.png)
this goes true for allen as well!!!!
cheers & thank you sooo much!!!!!
tomek
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 tosearch
to get a processing indicator while the search is happening.Allan