Block data when processing
Block data when processing
![Herless](https://secure.gravatar.com/avatar/b89d44059872916a3a5905e2b359f4d9/?default=https%3A%2F%2Fvanillicon.com%2Fb89d44059872916a3a5905e2b359f4d9_200.png&rating=g&size=120)
Hello, good evening, could data be blocked when processing or updating due to searching or paginating.
Let me explain, I am using serverside but I need to lock the table or data when clicking on another page or when searching for information, something like this could be done.
Replies
Do you mean stopping the data in the HTML table being selected by the end user using mouse click and drag? Or locking of the SQL table?
Allan
Lock or dim the screen so that the user does not select anything when loading new data behind dataTables_processing on the client side.
You can use a plugin like BlockUI to control the user's ability to interact with the page. Using the blocking plugin of your choice you can block the page when the page loads then unblock in
initComplete
. Use thepreXhr
andxhr
events to block and unblock when server side requests are sent.Kevin
Yes, I have tried the plugin but when using the search engine it blocks the entire table, including the search engine.
I'm not sure what you mean by search engine. Is this a Datatables component or something else?
I thought you want to stop interaction with the web page when the server side processing request is being processed.
What exactly do you want to block? Please provide more specific details. Or maybe a link to your page or test case showing an example of what you want to block.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case
Kevin
When you say "search engine", do you mean the
input
for DataTable's global search?You can do what you are looking for with the default
div.dataTables_processing
element. Just add some extra CSS for it.You might want to tweak it further (particularly the background colour!). The pulsing icons inside it don't align with just that, it would need a little extra CSS.
Allan
I mean the search engine.
Additional if possible, I would like to add a div that encompasses dataTables_processing
Example:
Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
Do you mean the default search
input
supplies or the SearchBuilder extension or the SearchPanes extension or something else?I'm not sure if there is a way to wrap the
dataTables_processing
div
but you can insert adiv
insidedataTables_processing
usinglanguage.processing
, for example:https://live.datatables.net/dolipuco/1/edit
Will that work for your needs?
Kevin
There isn't a way to wrap the processing element without modifying DataTables. You could use the
processing
event to show / hide a custom blocking element though.I still don't know what you mean by "Search engine" either. A screenshot with an arrow pointing to it would clarify that.
Allan
When I use BlockUI the entire page blocks and the search input also blocks.
Is that what you want to have happen?
If not please provide details, more than one sentence, of your requirements when processing is displayed.
Kevin
Are you saying want everything on the page blocked except the search
input
to allow users to keep typing while processing but block all other interaction?Kevin
Exact kthorngren
I think you'd need a click / focus / keypress listener on all the other elements and
preventDefault()
on them. That sounds like a lot of work to me for the second or so that the data is loading from the search!Allan
I was already able to do it with blockUI per element.
Thanks for your support.