1

I'm using a jQuery datatable with Bootstrap v2. When the page first loads, it displays "Processing..." which is good. It also displays this message when I change pages or sort - also good.

Most of the time the database on the backend is quick and the Processing message is only on screen for one second or less.

However in some cases, like if they are doing a search across a large number of rows, it can take several seconds for this to complete.

I want to make it so that if the Processing message is still displayed after x seconds, that I update it somehow - such as changing the style to add a background-color: yellow around it, and/or changing the mesage to "Processing longer. Please wait...".

I figured the first step was to bind to the Filter event. I was able to do that. But I wasn't able to figure out how to bind to the initial loading of the table, which does Processing... and can take a while depending on the query.

Likewise I figure this may be a fairly common thing to want to do, so I was wondering if anyone can share a snippet of code that attaches to the necessary events and will automatically find the Processing div and update it on the fly after x seconds, and then clear it so that the next time it does an Processing... message it starts back again assuming it will be quick and only changes after x seconds.

Thanks in advance!

4

1 回答 1

3

You could try using the fnPreDrawCallback to start a time out, then use fnDrawCallback to clear the time out ( and reset the message state ).

I typed this on my phone, so please forgive any errors:

$(document).ready(function() {
    var extendedLoadingTimer,
        setExtendedLoadingMessage = function(){
            // Do the stuff to change the message
            // Like adding a css class and changing the text
        },
        resetLoadingMessage  = function(){
            // Do stuff to reset the message back to it's starting state
            // Like removing the css class and resetting the text
        };

    $('#your-table-id').dataTable({
        // Add your other data table options here ...
        "fnPreDrawCallback": function() { 
            // Start the timer
            extendedLoadingTimer = setTimeout(function(){
                // When the timer is done ( after 400 miliseconds ) 
                // update the message
                setExtendedLoadingMessage();
            }, 400);
        },
        "fnDrawCallback": function() {
            // Stop the timer from changing after its done ( although 
            // it might already be done at this point )
            clearTimeout(extendedLoadingTimer);

            // Whether the timer was done or not, always reset 
            // the message back to its original state
            resetLoadingMessage();
        }
    });
});
于 2013-11-15T06:42:52.807 回答