ngTableParams Pagination with $http.get
First of all your code is using the local data array as a source in ngTables getData
callback and it is not clear what you are presenting as a comparison since you did not actually try AJAX Data Loading from the official examples .
Instead I would expect it to have an api call to the server using $http.get.
Remember for server side paging to work you must update the total count each time you query for data because they may have changed. Also you will have to consider a server side solution for sorting as well.
Here is a working sample using the github api as a test service.
var app = angular.module('main', ['ngTable']);
app.controller('MainCtrl', function($scope, $http, ngTableParams) {
$scope.tableParams = new ngTableParams({
page: 1,
count: 5,
}, {
getData: function ($defer, params) {
var page = params.page();
var size = params.count();
var testUrl = 'https://api.github.com/search/repositories';
var search = {
q: 'angular',
page: page,
per_page: size
}
$http.get(testUrl, { params: search, headers: { 'Content-Type': 'application/json'} })
.then(function(res) {
params.total(res.data.total_count);
$defer.resolve(res.data.items);
}, function(reason) {
$defer.reject();
}
);
},
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.js"></script>
<div ng-app="main" ng-controller="MainCtrl">
<table ng-table="tableParams" class="table table-striped table-bordered table-hover table-condensed">
<tr ng-repeat="repo in $data">
<td data-title="'id'">{{repo.id}}</td>
<td data-title="'name'">{{repo.name}}</td>
<td data-title="'owner'">{{repo.owner.login}}</td>
</tr>
</table>
<div>
DeKnarf
Updated on June 04, 2022Comments
-
DeKnarf about 2 years
Working on an AngularJS project and I've ran into the following problem:
When using locally stored / hard coded data, the pagination works fine. When using remotely stored data, the pagination does not work properly.
I have searched quite a bit, but couldn't find the solution to my problem, so here are the code snippits:
The HTML:
<div ng-controller="ngTableCtrl"> <p><strong>Pagina:</strong> {{tableParams.page()}}</p> <p><strong>Aantal weergegeven:</strong> {{tableParams.count()}}</p> <table ng-table="tableParams" class="table table-striped" template-pagination="custom/pager"> <tr ng-repeat="x in names"> <td data-title="'Name'">{{x.Name}}</td> <td data-title="'City'">{{x.City}}</td> <td data-title="'Country'">{{x.Country}}</td> </tr> </table> <script type="text/ng-template" id="custom/pager"> <ul class="pager ng-cloak"> <li ng-repeat="page in pages" ng-class="{'disabled': !page.active, 'previous': page.type == 'prev', 'next': page.type == 'next'}" ng-show="page.type == 'prev' || page.type == 'next'" ng-switch="page.type"> <a ng-switch-when="prev" ng-click="params.page(page.number)" href="">« Previous</a> <a ng-switch-when="next" ng-click="params.page(page.number)" href="">Next »</a> </li> <li> <div class="btn-group"> <button type="button" ng-class="{'active':params.count() == 2}" ng-click="params.count(2)" class="btn btn-default">2</button> <button type="button" ng-class="{'active':params.count() == 5}" ng-click="params.count(5)" class="btn btn-default">5</button> <button type="button" ng-class="{'active':params.count() == 10}" ng-click="params.count(10)" class="btn btn-default">10</button> <button type="button" ng-class="{'active':params.count() == 15}" ng-click="params.count(15)" class="btn btn-default">15</button> </div> </li> </ul> </script> </div>
The JS:
app.controller('ngTableCtrl2', function ($scope, $http, $filter, ngTableParams) { $http.get('http://www.w3schools.com/angular/customers.php') .success(function (response) {$scope.names = response.records;}); $scope.tableParams = new ngTableParams({ page: 1, // show first page count: 5, // count per page sorting: { name: 'asc' // initial sorting } }, { total: data.length, // length of data getData: function ($defer, params) { // use build-in angular filter var orderedData = params.sorting() ? $filter('orderBy')(data, params.orderBy()) : data; $defer.resolve(orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count())); } }); });
The webpage ( live version: http://178.62.232.175:8080/STANDARD/#/app/table/data ) shows all results in the first table (remote, from $http.get), whilst the second table, shows only the set results?! (2, 5, 10, 15) The code is identical, except for:
<tr ng-repeat="x in names">
used to display remote data and is replaced by:
<tr ng-repeat="x in $data">
to display raw data as such:
var data = [{ Name: "Alfreds Futterkiste", City: "Berlin", Country: "Germany"},{ Name: "Ana Trujillo Emparedados", City: "México D.F.", Country: "Mexico"},{ Name: "Antonio Moreno Taquería", City: "México D.F.", Country: "Mexico"},{ Name: "Around the Horn", City: "London", Country: "UK"},{ Name: "B's Beverages", City: "London", Country: "UK"},{ Name: "Berglunds snabbköp", City: "Luleå", Country: "Sweden"},{ Name: "Blauer See Delikatessen", City: "Mannheim", Country: "Germany"},{ Name: "Blondel père et fils", City: "Strasbourg", Country: "France"},{ Name: "Bólido Comidas preparadas", City: "Madrid", Country: "Spain"},{ Name: "Bon app", City: "Marseille", Country: "France"},{ Name: "Bottom-Dollar Marketse", City: "Tsawassen", Country: "Canada"},{ Name: "Cactus Comidas para llevar", City: "Buenos Aires", Country: "Argentina"} ];
The pagination of the second table works as it should. What must I edit to make it work with remote data?
-
DeKnarf about 9 yearsI modified my code to look exactly like yours, but now it's just giving me nothing. 178.62.232.175:8080/STANDARD/#/app/table/data < live version
-
cleftheris about 9 yearsplease update your question to include what you are currently trying and fails. Otherwise I cannot guess. The link you are giving does not help a lot since it is failing with errors.
-
cleftheris about 9 years@DeKnarf I peeked in your code and you have several syntax errors in your javascript file ngTableCtrl.js. Check the example above again. change line 27 from
var page - params.page();
tovar page = params.page();
and line 42 from};
to);
-
DeKnarf about 9 yearsThank you, that does work. Now I 'should' be able to work from that!