This post is 5th part of a series called Getting Started with Datatable 1.10 .

  1. DataTable demo (Server side) in Php,Mysql and Ajax
  2. DataTable (Server side) Custom Column Search
  3. Datatable Scroller (Server Side)
  4. DataTable Responsive (Server side)
  5. Datatable Custom Loader
  6. Datatable Colvis (Column Visibility Customization)
  7. DataTable Table tools
  8. DataTable Custom Search By Tags Input (Server side)
  9. DataTable Search By Datepicker (Server side)
  10. Datatable Bulk Delete (Server Side)
  11. Datatable Page Resize (Server Side)

When you are performing multiple ajax call like searching, paginating or sorting , server may takes much time to send response. The purpose of the Datatable custom loader is to show to the user that while the action has not yet completed, the computer is working on their request. As long as the interface clearly indicates to the user that their request was received and is pending, then the UI element has done its job.

By default datatable has a text loader “Processing…”, you can customize the message by
language option.

01
02
03
04
05
06
07
08
09
10
$(document).ready(function() {
   var dataTable =  $('#employee-grid').DataTable( {
    processing: true,
    "language": {
        "processing": "Hang on. Waiting for response..." //add a loading image,simply putting <img src="loader.gif" /> tag.
    },
    serverSide: true,
    ajax: "employee-grid-data.php", // json datasource
    } );
} );

Today I will replace text message by an animated css3 loader. For this I have created two css files “dataTables.customLoader.walker.css” and “dataTables.customLoader.circle.css“.

datatable-custom-loader

You can use any one from here. You can also modify the css or add some different animation/style. “.dataTables_processing” class is holder of the datatable loader. Lets find it using firebug or any developers tools. Happy hacking.