Sarun UK Sarun UK - 1 month ago 14
AngularJS Question

Data is not populating in the ngTable

Iam new to angularJS. Iam tring to implement a table with pagination using ngTable.

Initially I tried with ngTableParams injection ('n' is lowecase), it was not supporting in the angular at all.

As my understanding I need to relook the getData function implementation in the controller
(Not getting any error in the browser console.)

Attaching the code below.

Controller



'use strict';

angular.module('settings')
.controller('SettingsAcademicYearCtrl', ['$scope', '$http', 'AcademicYearFactory', 'NgTableParams',
function ($scope, $http, AcademicYearFactory, NgTableParams) {

var tableData = [];

$scope.usersTable = new NgTableParams({
page: 1,
count: 3
}, {
//total: $scope.users.length,
total: tableData.length,
getData: function (params) {

$http.get('modules/settings/controllers/data.json').then(function (response) {
tableData = response.data.users;
//$defer.resolve(tableData.slice((params.page() - 1) * params.count(), params.page() * params.count()));
params.total(tableData.length);
return response.data;

});
}
});

}]);


data.json



{
"users":[{
"id": 1,
"first_name": "Philip",
"last_name": "Kim",
"email": "pkim0@mediafire.com",
"country": "Indonesia",
"ip_address": "29.107.35.8"
},
{
"id": 2,
"first_name": "Judith",
"last_name": "Austin",
"email": "jaustin1@mapquest.com",
"country": "China",
"ip_address": "173.65.94.30"
},
{
"id": 3,
"first_name": "Julie",
"last_name": "Wells",
"email": "jwells2@illinois.edu",
"country": "Finland",
"ip_address": "9.100.80.145"
},
{
"id": 4,
"first_name": "Gloria",
"last_name": "Greene",
"email": "ggreene3@blogs.com",
"country": "Indonesia",
"ip_address": "69.115.85.157"
},
{
"id": 50,
"first_name": "Andrea",
"last_name": "Greene",
"email": "agreene4@fda.gov",
"country": "Russia",
"ip_address": "128.72.13.52"
}]
}


html



<div>
<table ng-table="usersTable" class="table table-striped">
<tr ng-repeat="user in data">
<td data-title="'Id'">
{{user.id}}
</td>
<td data-title="'First Name'">
{{user.first_name}}
</td>
<td data-title="'Last Name'">
{{user.last_name}}
</td>
<td data-title="'e-mail'">
{{user.email}}
</td>
<td data-title="'Country'">
{{user.country}}
</td>
<td data-title="'IP'">
{{user.ip_address}}
</td>
</tr>
</table>
</div>


And also included all the necessary js and css files in the main html page.

Can someone help me to fix this problem.
Thanks in advance.

Answer

Try this approach for server side pagination.

controller :-

'use strict';

angular.module('settings')
    .controller('SettingsAcademicYearCtrl', ['$scope', '$http',
        function ($scope, $http) {


      $scope.getAllRecords = function () {

            $scope.currentPage = 1;
            $scope.maxSize = 5; //Number of pager buttons to show

            $scope.records = [];
            getData();

            function getData() {
                var url = "AcademicYearFactory/paged/10/" + $scope.currentPage;
                $http({
                    url: url
                }).
                success(function (response) {
                    $scope.viewby = 10;
                     $scope.totalItems = response.data.length;
                    angular.copy(response.data, $scope.records);
                }).
                error(function (status) {
                    //your code when fails
                });
            }

            $scope.setPage = function (pageNo) {
                $scope.currentPage = pageNo;
            };

            $scope.pageChanged = function () {
                getData();
            };
        };

        }

html:-

  <tr ng-repeat="record in records">
                <td>{{record.first_name}}</td>
                <td>{{record.last_name}}</td>
                <td>{{record.email}}</td>
                <td>{{record.country}}</td>
            </tr>
Comments