AngularJS Datatables unable to load data. My code is below
AngularJS Datatables unable to load data. My code is below
ijawad
Posts: 3Questions: 1Answers: 0
<!DOCTYPE html>
<html>
<head>
<title>List</title>
<meta charset="utf-8" />
<script src="~/angular-1.8.2/angular-1.8.2/angular.js"></script>
<script src="~/angular-1.8.2/angular-1.8.2/angular-route.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<link href="http://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css" rel="stylesheet" />
<style>
img {
width: 100px;
height: 100px;
}
</style>
<script>
//Get Product List Module
var myApp = angular.module('myApp', ['ngRoute']);
//Global Variable for store service base path
myApp.constant('serviceBasePath', 'https://localhost:44327');
//Product List Controller
myApp.controller("ListController", ['$scope', '$window', '$http', 'serviceBasePath', function ($scope, $window, $http, serviceBasePath) {
$scope.ListOfProductDetails = [];
$scope.Status;
$scope.Currentuser = null;
$scope.accesstoken = null;
$scope.refreshtoken = null;
if (localStorage.getItem('CurrentUser') === null) {
$window.location.href = '/Home/Login';
}
//Get Data from local storage
$scope.getLocalStorage = function () {
$scope.Currentuser = JSON.parse(localStorage.getItem('CurrentUser'));
$scope.accesstoken = $scope.Currentuser.token; // your token
$scope.refreshtoken = $scope.Currentuser.refreshtoken; // your refresh token
}
//Get all ProductDetails and bind with cshtml table
$scope.getData = function () {
$scope.Currentuser = JSON.parse(localStorage.getItem('CurrentUser'));
$scope.accesstoken = $scope.Currentuser.token; // your token
$scope.refreshtoken = $scope.Currentuser.refreshtoken; // your refresh token
$http(
{
method: 'GET',
url: serviceBasePath + '/ProductDetails',
headers: {
'Authorization': 'bearer ' + $scope.accesstoken
}
}).then(function (response) {
$scope.ListOfProductDetails = response.data;
}).catch(function () {
//Refresh the Token if Expired
$scope.getRefreshToken();
});
}
//Get Data from Server
$scope.getData();
//Function Refresh token
$scope.getRefreshToken = function () {
$scope.newtoken = {
token: '',
refreshToken: ''
}
$scope.newtoken.token = $scope.accesstoken;
$scope.newtoken.refreshToken = $scope.refreshtoken;
$http(
{
method: 'POST',
url: serviceBasePath + '/Account/RefreshToken',
data: JSON.stringify($scope.newtoken),
headers: { 'Content-Type': 'application/json' }
}).then(function (response) {
//Get Token from Server
$scope.token = response.data.token;
//Get Refresh Token from Server
$scope.refreshToken = response.data.refreshToken;
//Store token in Local Storage
localStorage.setItem('CurrentUser', JSON.stringify({ token: $scope.token, refreshtoken: $scope.refreshToken }));
$scope.getLocalStorage();
$scope.getData();
}).catch(function () {
$window.location.href = '/Home/Login';
})
}
}]);
$(document).ready(function () {
$('#mytable').dataTable();
});
</script>
</head>
<body>
<div ng-controller="ListController" ng-app="myApp">
<a href="/ProductDetails/Add" class="btn btn-primary btn-xs">Add</a>
<br />
<br />
<div class="table-responsive">
<table id="mytable" class="table table-bordred table-striped">
<thead>
<tr>
<th>Product ID</th>
<th>Product Name</th>
<th>Product Price</th>
<th>Product Quantity</th>
<th>Company Name</th>
<th>Manufacturing Year</th>
<th>Product Image</th>
<th>Edit</th>
<th>Delete</th>
</tr>
</thead>
<tbody class="toappend">
<tr ng-repeat="item in ListOfProductDetails">
<td>{{item.productId}}</td>
<td>{{item.productName}}</td>
<td>{{item.productPrice}}</td>
<td>{{item.productQuantity}}</td>
<td>{{item.companyName}}</td>
<td>{{item.manufacturingYear}}</td>
<td><img ng-src="{{item.imageSrc+item.imageName}}" /></td>
<td>
<a class="btn btn-primary btn-xs" href="/ProductDetails/Edit?{{item.productId}}">Edit</a>
</td>
<td>
<a class="btn btn-danger btn-xs" href="/ProductDetails/Delete?{{item.productId}}">Delete</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Edited by Kevin: Syntax highlighting. Details on how to highlight code using markdown can be found in this guide
Answers
Thanks for the code. What happens when you try loading the page? Do you get errors? What troubleshooting steps have you taken?
Kevin
Actually i am not getting the list data in datatable
Comment out
$('#mytable').dataTable();in line 112. Is the table populated?Kevin
table is populated, table header is populated also but in table body i am using ng-repeat list items . that is unable to embed in the datatables
I'm not familiar with Angular bu tI suspect the problem is with timing. The
ListOfProductDetailslooks to be the result of an asynchronous Ajax request whcih populates the table after the document is ready. So this code runs before the table is populated and Datatables doesn't know about the data:One option is to make sure to execute
$('#mytable').dataTable();after the table is populated. I'm not sure how to do this in your environment.Another option is to no use ng-repeat and leave the Datatable init code where its at and in the
thenfunction (line 60) userows.add()to have Datatables populate the table. You will need to usecolumns.datato define the data objects and usecolumns.renderto render your buttons, see this example.Kevin