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()
                                      ];


    });
});

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). — Frank Modica
– Frank Modica, Commented Jun 28, 2017 at 1:21
"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 — query
– query, Commented Jun 28, 2017 at 1:36

Frank Modica · Accepted Answer · 2017-06-28 02:07:16Z

7

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.

edited Jun 28, 2017 at 2:07

answered Jun 28, 2017 at 1:44

Frank Modica

10.5k4 gold badges27 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

query Over a year ago

is there any other way to prevent the rendering before data has come back ?

Frank Modica Over a year ago

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 Over a year ago

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 Over a year ago

@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 Over a year ago

@PraveenMP i am using ng-cloak but don't know why this is not working in this issue

|

Santosh Pandey · Accepted Answer · 2020-03-04 11:53:31Z

0

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">

answered Mar 4, 2020 at 11:53

Santosh Pandey

1293 bronze badges

Collectives™ on Stack Overflow

Angularjs no data available in table issue

2 Answers 2

9 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related