Block data when processing

Herless

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.

allan

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

Herless

Lock or dim the screen so that the user does not select anything when loading new data behind dataTables_processing on the client side.

kthorngren

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 the preXhr and xhr events to block and unblock when server side requests are sent.

Kevin

Herless

Yes, I have tried the plugin but when using the search engine it blocks the entire table, including the search engine.

kthorngren

I'm not sure what you mean by search engine. Is this a Datatables component or something else?

Lock or dim the screen so that the user does not select anything when loading new data behind dataTables_processing on the client side.

I thought you want to stop interaction with the web page when the server side processing request is being processed.

I have tried the plugin but when using the search engine it blocks the entire table, including the search engine.

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

allan

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.

div.dataTables_processing {
  position: fixed;
  top: 0;
  height: 100%;
  left: 0;
  width: 100%;
  background: green;
  z-index: 100;
}

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

Herless

I mean the search engine.

Additional if possible, I would like to add a div that encompasses dataTables_processing

Example:

<div class='newclas'><div class='dataTables_processing'>Processing</div></div>

Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

kthorngren

I mean the search engine.

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 a div inside dataTables_processing using language.processing, for example:
https://live.datatables.net/dolipuco/1/edit

Will that work for your needs?

Kevin

allan

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

Herless

When I use BlockUI the entire page blocks and the search input also blocks.

kthorngren

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

kthorngren

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

Herless

Exact kthorngren

allan

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

Herless

I was already able to do it with blockUI per element.

Thanks for your support.