DeKnarf DeKnarf -5 years ago 612
AngularJS Question

ngTableParams Pagination with $http.get

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:


<div ng-controller="ngTableCtrl">
<p><strong>Pagina:</strong> {{}}</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>

<script type="text/ng-template" id="custom/pager">
<ul class="pager ng-cloak">
<li ng-repeat="page in pages"
ng-class="{'disabled': !, '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="" href="">&laquo; Previous</a>
<a ng-switch-when="next" ng-click="" href="">Next &raquo;</a>
<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>

The JS:

app.controller('ngTableCtrl2', function ($scope, $http, $filter, ngTableParams) {

.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(( - 1) * params.count(), * params.count()));

The webpage ( live version: ) 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?

Answer Source

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 =;
                    var size = params.count();
                    var testUrl = '';
                    var search = {
                      q: 'angular',
                      page: page,
                      per_page: size
                    $http.get(testUrl, { params: search, headers: { 'Content-Type': 'application/json'} })
                         .then(function(res) {
                        }, function(reason) {
<link href="" rel="stylesheet"/>
<link href="" rel="stylesheet"/>
<script src=""></script>
<script src=""></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'">{{}}</td>
            <td data-title="'name'">{{}}</td>
            <td data-title="'owner'">{{repo.owner.login}}</td>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download