asp.net mvc angular jquery table not working

Question

I am new to asp.net mvc with angular and i am unable to add load jquery table.Jquery Datatable showing No data available in table,below is my code

My Controller

app.controller('SpaceController', function ($scope, SpaceService) {

    $scope.getAll = function () {

        loader(true);
        var getData = SpaceService.getAllData();
        getData.then(function (response) {

            if (response.data.success) {
                $scope.listdt = response.data.data;
                $('#TblID').DataTable();
                $scope.populateStatus();
                loader(false);

            }
            else {
                errorAlert("Oops", response.data.message);
                loader(false);
            }
        });
    }
})

My Service

app.service("SpaceService", function ($http) {


        this.getAllData = function () {
            var response = $http({
                method: "GET",
                url: "/Space/getAll",
                dataType: "json"
            });
            return response;
        }
});

My Table html

<table class="table display" id="TblID">
    <thead>
        <tr>
            <th>ID</th>
            <th>Key</th>
            <th>Name</th>
            <th>Description</th>
            <th>Status</th>
            <th>Action</th>
        </tr>
    </thead>

    <tbody>

        <tr ng-repeat="d in listdt">
            <td>{{d.SpaceID}}</td>
            <td>{{d.SpaceKey}}</td>
            <td>{{d.SpaceName}}</td>
            <td>{{d.SpaceDesc}}</td>
            <td> <span
                    class="label label-table {{d.StatusKey == 'A' ? 'label-success' : 'label-red'}}">{{d.StatusName}}</span>
            </td>
            <td>
                <a class="btn btn-primary btn-sm" ng-click="edit(d)"><i class="fa fa-pencil fa-lg"></i></a>
                <a class="btn btn-danger btn-sm" ng-click="delete(d)"><i class="fa fa-trash fa-lg"></i></a>
            </td>
        </tr>

    </tbody>
</table>

I am unable to find why it is showing No Data,when i try search some thing from table all got rows hide and start showing No data available in table.below is screen shoot.

Answer 1

Mixing frameworks is a notoriously bad idea. You're using a jquery plugin to render a table generated by AngularJs. I'm sure there are fine AngularJs components that can do something similar to DataTables.

Probably what's happening is that DOM hasn't been refreshed with rendered table data when $('#TblID').DataTable() is called. So certain information isn't available when DataTables begins its rendering. If this is correct, a hacky solution would be to call DataTable() inside of a setTimeout():

getData.then(function (response) {
  if (response.data.success) {
     $scope.listdt = response.data.data;
     $scope.populateStatus();
     $timeout(function() {
        $('#TblID').DataTable();
     })
     loader(false);
  }
  /* ... */
}

If this doesn't solve your problem, then I recommend not having Angular render the table and passing the response to the DataTable function directly.

getData.then(function (response) {
  if (response.data.success) {
     $scope.listdt = response.data.data;
     $scope.populateStatus();
     $('#TblID').DataTable({
       data: response.data.data,
       columns: [
         { data: 'SpaceID', name: 'ID' },
         { data: 'SpaceKey', name: 'Key' },
         { data: 'SpaceName', name: 'Name' },
         { data: 'SpaceDesc', name: 'Description' },
         { data: 'StatusName', name: 'Status' } /* use more advanced options for style */
       ],
       buttons: [ 
         { tag: 'edit', className: 'fa fa-pencil fa-lg', action: (e, b) => $scope.edit(b.row().data()) },
         { tag: 'delete', className: 'fa fa-trash fa-lg', action: (e, b) => $scope.delete(b.row().data()) }
       ]
     });

     loader(false);
  }
  /* ... */
}