I have a jQuery tableSorter table, where it takes a LONG time to load, 3-5 seconds, after the page loads, leaving the user seeing an unformatted pageblocktable, until the jquery 'kicks in'.

Records are 300+, but expecting thousands once in production. Once it loads, it works great.

One solution I read was to hide the table


, but have it un-hidden on Document.ready, like so :

$J("#ID").css('display', 'block');

But I've tried and it doesn't seem to work... any thoughts? Is there a better way to do this?


An even better solution would be to have a loading dialog for your users. You could accomplish this with something like:

  .loading-dialog {
    width: 200px;
    background: #f5f5f5;
    text-align: center;
    margin: 10% auto;
    padding: 10px;
    border-radius: 2px;
    box-shadow: 0 2px 2px rgba(0,0,0,0.15);
    border: 1px solid #fff;
    color: #555;
    z-index: 1002;
    position: relative;
  .loading-shade {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1001;
    background: rgba(0,0,0,0.3);

<div class="loading-dialog" id="loader">
<div class="loading-shade" id="shade"></div>

  //call this when table is loaded
  function hideLoader() {

If you want to totally blank out the page for your users you can change the opacity and color of the shade. The key is calling the hideLoader() function when your table is done loading. I am not familiar with the plugin but if it is built by JQuery it most likely has a callback function or ready event that you can tap into.

  • Hey - thanks so much for this! Sorry for late reply but didn't get a chance to implement until now. I'm having issues with the shade/loader not being removed, but I can figure that out. Thanks!! – RC82 Dec 4 '15 at 16:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.