Is there a way to avoid ajax loader from covering headers in jquery-datatables?

Question

I am working on a web application that works on jquery data-tables that loads data from server side. When the data table initially loads, the loader covers the headers as shown here . Is there a way we can show the headers clearly and loader below it?

I have tried using various ways to manipulate the div that holds the processing bar(which is generated by data-table), but functions like drawCallBack , preDrawCallBack , and initComplete only work after the loading completes and the function init comes up before the loader classes are initialized.

Then I tried using the processing event and tried to create an external loader that comes below the table when the table is empty. However, I am not sure how this can be handled when a reload is initiated with existing data, where the loader is expected to be loaded at the center of the table, while in the initial case the loader should be below the existing table structure as shown in the image .

Answer 1

Got the answer. If we have a look at the classes generated by the data table, you can find a wrapper class. I just added a property called min-height in my CSS class to the wrapper and the issue got fixed.

dataTables_wrapper{
 min-height: 100px;
}