call data dynamically from API using pagination

Question

I need help with pagination in AngularJS application.

My URL: localhost/myurl gives me data as:

Success: {
    total: 349,
    per_page: 10,
    current_page: 1,
    last_page: 35,
    from: 1,
    to: 10,
    data: [{
        name: 'name1',
        age: 'age1'
    }, {
        name: 'name2',
        age: 'age2'
    }]
}

My view:

<div ng-controller="DemoCtrl">
    <p><strong>Page:</strong> {{tableParams.page()}}</p>
    <p><strong>Count per page:</strong> {{tableParams.count()}}</p>
    <table ng-table="tableParams" class="table">
        <tr ng-repeat="user in $data">
            <td data-title="'Name'">{{user.Name}}</td>
            <td data-title="'Email'">{{user.EMAIL}}</td>
        </tr>
    </table>
</div>

my js

var app = angular.module('main', ['ngTable'])
.service('myservice', ['$http', function($http){
    this.getData = function(url){
        return $http.get(url);
    };
}])
.controller('DemoCtrl',['$scope', 'ngTableParams', 'myservice', function($scope, ngTableParams, myservice) {
    myservice.getData('http://localhost/testpagination/public/testpagination').success(function(response){
        if (response.Success) {
            console.log(response.Success.data);
            var data = response.Success.data;
            $scope.tableParams = new ngTableParams({
                page: 1,            // show first page
                count: 10           // count per page
            }, {
                total: response.Success.total, // length of data
                getData: function($defer, params) {
                    $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
                }
            });
        } else if (response.Fail) {
            console.log('i got fail.');
        }
    }).error(function(response){
        console.log('http error');
    });
}]); 

I am getting my first ten (1 to 10) data for the first time but how may I proceed to the next page (call second pagination API) dynamically?

Answer 1

According to the problem you told me on facebook, you have to create a link and do this according to the ng-table documentation just create a link and use params.page(pageNum)

<a href="javascript:void(0);" ng-click="params.page(2)">Page2</a>

Alternatively...you'll have to use routing on angular side.. i.e.

.config(function($routeProvider, $locationProvider) {
    $routeProvider
     .when('/page/:pageNum', {
      templateUrl: 'page.html',
      controller: 'pageController'
    });
  });

The "pageNum" here will be the parameter for the call.. I.e. localhost/myurl/page/2

Then in controller..

controller('pageController',['$scope','ngTableParams','myservice','$routeParams',function($scope, ngTableParams,myservice,$routeParams) {

    myservice.getData('http://localhost/testpagination/public/testpagination').success(function(response){
        if(response.Success){
            console.log(response.Success.data);
            var data=response.Success.data;
             $scope.tableParams = new ngTableParams({
        page: (10 * ($routeParams.pageNum-1))+1,            // show first page
        count: 10           // count per page
    }, {
        total: response.Success.total, // length of data
        getData: function($defer, params) {
            $defer.resolve(data.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });
        }else if(response.Fail){
            console.log('i got fail.');
        }
    }).error(function(response){
        console.log('http error');
    });
}]);