Want to show loader GIF in datatables

Question

I'm using datatables. My code is working fine. Now I want to add a loader image (gif). I don't know how to add this. Here is my datatable script so far.

$(document).ready(function() {
    $("#dvloader").show();
    oTable = $('#example').dataTable({
        "bJQueryUI": true,
        "sPaginationType": "full_numbers"                   
    });
});

Here is my loader:

<div id="loader">
    <img src="ajaxloader.gif" />
</div>

Answer 1

In datatables 1.10 and onwards, you should use:

$('#example').dataTable({
  language: {
     processing: "<img src='loading.gif'>"
  },
  processing: true
});

Not required as of today, but more standard given the new documentation. The project changed from using Hungarian notation to standard camelCase in the most recent update. Of interest:

Please note that the Hungarian notation option is deprecated and will be removed in future versions of the extensions (on the extension's next major version update - i.e. 1.x to 2.x, although 2.x is not planned for a long time to come - plenty of life in the 1.x series still!). The documentation for the extensions will be updated to remove the Hungarian notation before that point.

Answer 2

If you want to replace the 'Processing...' string with an image as you mentioned in the comment you need to take a look here

$('#example').dataTable( {
    oLanguage: {
        sProcessing: "<img src='loading.gif'>"
    },
    processing : true
});