Question

189

Limit and Offset data results in AngularJS for Pagination

rated 0 times [ 190] [ 1] / answers: 1 / hits: 19782 / 12 Years ago, sat, january 5, 2013, 12:00:00

Does AngularJS have Limit and Offset request methods when calling an external data resource that supports them?

I imagine there is a more elegant solution than this, where I am passing the limit and offset via the routeParams:

function ListCtrl($scope, $http, $routeParams) {

$http.jsonp('http://www.example.com/api/list.jsonp?callback=JSON_CALLBACK&limit=' + $routeParams.limit + '&offset=' + $routeParams.offset,{callback: 'JSON_CALLBACK'}).success(function(data) {

$scope.list = data;

  });

}

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

deanna

Add To Favorites

Follow

Total Points: 84

Total Questions: 86

Total Answers: 107

Location: Cyprus

Member since Wed, Dec 8, 2021

3 Years ago

deanna questions

1 CastError: Cast to ObjectId failed for value XXXXXXXXXX (type string) at path _id for model XXXX

Thu, Apr 21, 22, 00:00, 2 Years ago

1 Next.js behavior on back button pressed

Mon, Sep 6, 21, 00:00, 3 Years ago

1 React-Router + Typescript error while wrapping component with Router No overload matches this call

Sat, Feb 13, 21, 00:00, 3 Years ago

1 Use the webpack asset module with a custom output filename

Sun, Jan 17, 21, 00:00, 3 Years ago

1 React js random color

Sun, Nov 15, 20, 00:00, 4 Years ago

View All

answered 12 Years ago julieth · Accepted Answer

A complete pagination solution is: (1) a service that communicates with the server/database, (2) a directive to handle next/prev, and (3) a controller to glue it together.

Once you have the directive and the service, your controller is as simple as this:

app.controller('MainCtrl', function($scope, myData) {

  $scope.numPerPage = 5;

  $scope.noOfPages = Math.ceil(myData.count() / $scope.numPerPage);

  $scope.currentPage = 1;



  $scope.setPage = function () {

    $scope.data = myData.get( ($scope.currentPage - 1) * $scope.numPerPage, $scope.numPerPage );

  };



  $scope.$watch( 'currentPage', $scope.setPage );

});

With equally simple HTML:

<body ng-controller=MainCtrl>

  <ul>

    <li ng-repeat=item in data>{{item.name}}</li>

  </ul>

  <pagination num-pages=noOfPages current-page=currentPage class=pagination-small></pagination>

</body>

Here's a complete Plunker: http://plnkr.co/edit/Mg0USx?p=preview. It uses the pagination directive of ui-bootstrap, which is a work in progress.