remove 'Processing' instead of hide

Question

When we start sorting or other things datatables has option to show 'Process' message. All is fine , only when it hides 'Processing' there is still stay space where 'Processing' is placed. So html table jumping down when Processing showing then when data have been loaded Processing hidding but html table isn't jumping back up so there is stay visible place for it. Question, how to make datatable to remove Processing tag instead of just hide. Thanks

EDIT. I add html code

<div id="search_table_processing" class="dataTables_processing" style="visibility: hidden;">Processing...<img alt="&lt; &lt;" src="/themes/third_party/linkedin_search/img/165.gif"></div>

Answer 1

Well drat, I just ran into this and had to dig into it myself.

In version 1.9.0 you can search for this snippet:

an[i].style.visibility = bShow ? "visible" : "hidden";

(Found after searching for visibility.)

In the minified version it's currently this (using the NuGet package):

c[d].style.visibility=b?"visible":"hidden";

The problem is we neglected to style .dataTables_processing, as per the sample CSS files. Here's what one of the samples has for styling:

.dataTables_processing {
    position: absolute;
    top: 0px;
    left: 50%;
    width: 250px;
    margin-left: -125px;
    border: 1px solid #ddd;
    text-align: center;
    color: #999;
    font-size: 11px;
    padding: 2px 0;
}

Once it's styled (or bProcessing is set to false), there shouldn't be an issue.

If you're comfortable changing the functionality of the plug-in (if you think you can remember to change it back), then you could switch it to use display instead of visibility.

Answer 2

In case you are using Internationalisation - "oLanguage" attribute in your datatables constructor

replace the old sProcessing value with this in your localization file in order to place a custom image while processing :

"sProcessing":   "<img src='/themes/third_party/linkedin_search/img/165.gif'/>",

and here is how you link your datatables to a localization file (which can be downloaded from the datatables website Internationalisation of datatables) . . .

        "oLanguage": {
           "sUrl": "../../jQuery/dataTables/media/MyLanguageFilesFolder/en_US.txt"
         }

. . .

If you not using the Internationalisation of datatables you can always set the "sProcessing" value with the suggested above...

here an example :

$(document).ready(function() {
$('#example').dataTable( {
    "oLanguage": {
        "sProcessing": "<img src='/themes/third_party/linkedin_search/img/165.gif'>"
    }
} );

} );