Angularjs no data available in table issue

Question

I am using angularjs data table where every time before rendering the table i receive "no data available in table" message. After the message the table shows data in the expected way.so how to fix the issue? check demo

 app.controller('myCtrl', function($scope,$http,DTOptionsBuilder, DTColumnBuilder,DTColumnDefBuilder) {
 $scope.service = service;
 $http.get('ajax/list.php').success(function(data){
 $scope.cus_list = data; 
 $scope.vm = {};
 $scope.vm.dtOptions = DTOptionsBuilder.newOptions()
 .withOption('order', [0, 'asc']);
 $scope.vm.dtColumnDefs = [
 DTColumnDefBuilder.newColumnDef(1).notSortable()
 ];
 });
});

• Frank Modica: That's not the error I'm seeing. I see a "digest already in progress" error as a result of the $scope.$apply(); that's in the controller in that page (not shown in your question).
• query: sorry i forgot to remove that.check now.
• Frank Modica: Not seeing any errors now
• query: "no data available in table" message remains only for a few second after that is disappear and render the table, may be that's why you didn't notice

Answer 1

The table is rendering before the data has come back from the server. You might want to use ng-if on one of the HTML elements to wait until the data is available:

<table ng-if="userList" datatable="ng">

Edit The message you don't like has a CSS class of dataTables_empty. So maybe you can only show it with CSS if both the data has loaded and there are no rows showing in the table.

• query: is there any other way to prevent the rendering before data has come back ?
• Frank Modica: Unless datatables has its own way, you can either not render (using ng-if or ng-show) or hide the message using CSS.
• Frank Modica: If datatables has a way of letting you know how many rows it is currently showing, then you could use CSS to show the message only when both the data has loaded AND no rows are showing.
• Praveen M P: @query Using ngCloak directive is used to prevent the AngularJS html template from being briefly displayed by the browser in its raw docs.angularjs.org/api/ng/directive/ngCloak
• query: @PraveenMP i am using ng-cloak but don't know why this is not working in this issue

Answer 2

It is work for me, The table is rendering before the data has come back from the server. You might want to use

<table class="table table-bordered" *ngIf="mynotes" datatable [dtOptions]="dtOptions">