Ryan Vice Ryan Vice - 2 months ago 8
AngularJS Question

How can you do server side paging with Angular's UI Bootstrap pagination directive

Hi we are wanting to do server side paging with Angular's UI Bootstrap pagination directive. We know how to create a RESTful endpoint to serve up the pages from our servers but didn't see any documentations about how to hook that endpoint up to Angular's UI Bootstrap pagination directive.

Answer

Please see small demo below

angular.module('app', ['ui.bootstrap']);
angular.module('app').controller('PaginationDemoCtrl', function($scope, $http) {

  $scope.currentPage = 1;
 $scope.limit= 10;


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


  function getData() {
    $http.get("https://api.spotify.com/v1/search?query=iron+&offset="+($scope.currentPage-1)*$scope.limit+"&limit=20&type=artist")
      .then(function(response) {
        $scope.totalItems = response.data.artists.total
        angular.copy(response.data.artists.items, $scope.tracks)


      });
  }

//get another portions of data on page changed
  $scope.pageChanged = function() {
    getData();
  };


});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>


<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.0.js"></script>

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

<body ng-app="app">

  <div ng-controller="PaginationDemoCtrl">
    <h4>Sample Server Pagination</h4>

    <pagination total-items="totalItems" ng-model="currentPage" ng-change="pageChanged()" items-per-page="100"></pagination>
    <ul>
      <li ng-repeat="track in tracks" style="list-style:none">
<img ng-src="{{track.images[2].url}}" alt="" width="160"/>
{{track.name}}</li>
    </ul>

  </div>
</body>

Comments