15

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.

Ryan Vice
  • 2,133
  • 3
  • 23
  • 33
  • 1
    http://angular-ui.github.io/bootstrap/#/pagination -- Pretty detailed - the model is the current page, so each change event, fire a request back to the server, get the list for that page, and display it in your container. – tymeJV Jan 28 '15 at 20:30

2 Answers2

37

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>
sylwester
  • 16,498
  • 1
  • 25
  • 33
  • that api link doesn't work any more. Please update it – Elvin Mammadov Apr 18 '16 at 14:36
  • Last version of AngularUI Bootstrap (1.3.2) uses `` directive instead of ``. – Tonatio May 11 '16 at 14:11
  • @sylwester i need to send request like skipping the items. for example `apiUrl?skip=10` means it will skip the first 10. so how to do it using angular-ui bootstrap – codelearner May 18 '16 at 09:07
  • @codelearner change your request in getData function from $http.get("https://ws.spotify.com/search/1/track.json?q=kaizers+orchestra&page=" + $scope.currentPage) to apiUrl?skip=$scope.currentPage *10 – sylwester May 18 '16 at 11:58
  • @sylwester , initially it skip value should be zero. so if i send $scope.currentPage as zero. it will not increment everytime – codelearner May 19 '16 at 11:16
  • @sylwester Is there a Way that i could provide user with options only like First page and next page .When it comes to end of the page i need the button to be blurred – Praveen Jan 03 '17 at 19:08
-3

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

  $scope.currentPage = 1;

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


  function getData() {
    $http.get("https://ws.spotify.com/search/1/track.json?q=kaizers+orchestra&page=" + $scope.currentPage)
      .then(function(response) {
        $scope.totalItems = response.data.info.num_results
        angular.copy(response.data.tracks, $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">{{track.name}}</li>
    </ul>

  </div>
</body>
ASHOK
  • 17
  • 4