Block data when processing

Block data when processing

HerlessHerless Posts: 15Questions: 1Answers: 0

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

  • allanallan Posts: 60,903Questions: 1Answers: 9,927 Site admin

    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

  • HerlessHerless Posts: 15Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 19,864Questions: 26Answers: 4,685

    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

  • HerlessHerless Posts: 15Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 19,864Questions: 26Answers: 4,685
    edited October 2023

    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

  • allanallan Posts: 60,903Questions: 1Answers: 9,927 Site admin

    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

  • HerlessHerless Posts: 15Questions: 1Answers: 0
    edited October 2023

    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

  • kthorngrenkthorngren Posts: 19,864Questions: 26Answers: 4,685
    edited October 2023

    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

  • allanallan Posts: 60,903Questions: 1Answers: 9,927 Site admin

    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

  • HerlessHerless Posts: 15Questions: 1Answers: 0

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

  • kthorngrenkthorngren Posts: 19,864Questions: 26Answers: 4,685

    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

  • kthorngrenkthorngren Posts: 19,864Questions: 26Answers: 4,685

    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

  • HerlessHerless Posts: 15Questions: 1Answers: 0

    Exact kthorngren

  • allanallan Posts: 60,903Questions: 1Answers: 9,927 Site admin

    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

  • HerlessHerless Posts: 15Questions: 1Answers: 0

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

    Thanks for your support.

Sign In or Register to comment.