Avoid Rendering "no Data Available In The Table" In Datatables

I am using JQuery Datatables. When the table renders , it shows as 'No Data Available in the table', and after sometime the table starts appearing with data and this 'No data Avail

Solution 1:

Look here for complete reference -> https://datatables.net/reference/option/language the attributes you are looking for is loadingRecords, emptyTable and zeroRecords.

$("#example").DataTable({
  language: {
   emptyTable: "No data available in table", // loadingRecords: "Please wait .. ", // default Loading...zeroRecords: "No matching records found"
  }
})

Angular dataTables :

$scope.dtOptions = DTOptionsBuilder.newOptions()
  .withLanguage({
    emptyTable: "No data available in table", 
    loadingRecords: "Loading...",
    zeroRecords: "A different no matching records message"
  })

Solution 2:

Because you tagged your question with angularjs, I suppose you are using the datatable module for angularjs.

So try to add to your table tag:

class="ng-cloak"

It prevents to display html before the table is ready (module is initializated):

AngularJS: ngCloak Official API doc

If you not, it could happen because you are using ajax() to get the data to inject in your table, so try to initialize your datatable plugin after your ajax call like in this example