Styling processing badge/thing on server paging

ConorHiggins

Hi I would like to use my custom markup to replace the processing message that is displayed when a grid is processing something on the server. I have a nice spinner js library which I am using to display other loading events, so I need to try and replace the processing message with one of my own designs or templates. Should be a simple fix but can't find any guides for this.

allan

Hi Conor,

There are two aspects to the control of the processing element:

- oLanguage.sProcessing ( http://datatables.net/ref#sProcessing ) - the HTML that appears inside the processing element.

- `div.dataTables_processing` CSS class - for styling the DIV.

With these two options to can have it display just about anything you want to. If you need Javascript to occur on each display of the processing element, then you could use the `processing` event ( http://datatables.net/docs/DataTables/1.9.4/DataTable.html#processing ), but often the processing display may flash up so quickly there isn't time to load external images (depends upon the application).

Regards,
Allan

ConorHiggins

Allan, thanks for your help. I've tried both your methods and it only works to a certain extent. When I add the above class to my existing loading div, it just ends up floating it over the table regardless which isn't what we are looking for at all.

Changing the text works fine on the message but it still doesn't achieve what we are trying. I simply don't like the processing message and we have a better version developed ourselves.

I've tried listening for the processing event, and to display a custom message but it doesn't seem to be firing. It's not even logging messages on the event, so I am assuming I am not using the correct syntax? Here's a snippet of my declaration:
[code]
contactTable = $(".datatable").dataTable({
sDom: 'rt<"dataTables_bottom cf"pl>', // Move the components around
sPaginationType: "22touch", // Custom pagination HTML
oLanguage: { // Change some language stuff
"sLengthMenu": "_MENU_",
"sZeroRecords": "No Contacts found",
"sInfo": "Showing _START_ to _END_ of _TOTAL_ records",
"sInfoEmpty": "Showing 0 to 0 of 0 records",
"sInfoFiltered": "(filtered from _MAX_ total records)",
"sProcessing": "Processing"
},
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "/utils/server",
"bStateSave": false,
"bDeferRender": true,
"processing": function(e, oSettings, bShow){
console.log(e);
console.log(oSettings);
console.log(bShow);
},
....
[/code]

allan

> When I add the above class to my existing loading div, it just ends up floating it over the table regardless which isn't what we are looking for at all.

You want to use an external node, rather than the one used by DataTables? Sorry, I didn't understand that before. Just adding the DataTables class to your node would of course just apply the styles for that class to the element, so yes, that would be useless.

If you want to use a node external to the table, use the `processing` event (which is an event not an initialisation option):

[code]
contractTable.on( 'processing', function ( e, o, processing ) {
...
} );
[/code]

Allan