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.
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);
}
/* ... */
}
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments