AngularJS Datatables unable to load data. My code is below

AngularJS Datatables unable to load data. My code is below

ijawadijawad Posts: 3Questions: 1Answers: 0
edited November 2021 in DataTables 1.10
<!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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    Thanks for the code. What happens when you try loading the page? Do you get errors? What troubleshooting steps have you taken?

    Kevin

  • ijawadijawad Posts: 3Questions: 1Answers: 0

    Actually i am not getting the list data in datatable

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735
    edited November 2021

    Comment out $('#mytable').dataTable(); in line 112. Is the table populated?

    Kevin

  • ijawadijawad Posts: 3Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,141Questions: 26Answers: 4,735

    I'm not familiar with Angular bu tI suspect the problem is with timing. The ListOfProductDetails looks 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:

            $(document).ready(function () {
                $('#mytable').dataTable();
            });
    

    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 then function (line 60) use rows.add() to have Datatables populate the table. You will need to use columns.data to define the data objects and use columns.render to render your buttons, see this example.

    Kevin

Sign In or Register to comment.