5 - Use Pagination - BloomReach Experience - Open Source CMS

This article covers a Hippo CMS version 11. There's an updated version available that covers our most recent release.

04-07-2016

5 - Use Pagination

Previous - Code Diff

Reset the workspace to step 5:

git checkout -f step-5

Pagination

The Document Collection resource described in step 1 supports pagination of the documents list through the _offset and _max parameters:

http://localhost:8080/site/api/documents/?_offset=0&max=10

In this step the app's document list will be extended with pagination using the above parameters and UI Bootstrap's pagination directive.

Code Changes

Dependencies

A dependency to Angular UI Bootstrap is added to the app.

index.html

    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.0/ui-bootstrap.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/1.1.0/ui-bootstrap-tpls.js"></script>

app.js

var hippoRestApp = angular.module('hippoRestApp', [ 'ngRoute', 'ngResource',
    'ngSanitize', 'ui.bootstrap' ]);

DocumentsService

The DocumentsService is extended with offset and max parameters to enable pagination.

app.js

hippoRestApp.factory('DocumentsService', function($resource, apiPrefix) {
  return {
    getList : function(offset, max, query) {
      return $resource(apiPrefix + 'documents/', {
        _offset : offset,
        _max : max,
        _query : query
      }).get();
    },
    getDocumentById : function(uuid) {
      return $resource(apiPrefix + 'documents/' + uuid).get();
    }
  }
});

DocumentsController

The DocumentsController is extended with some management of the various pagination parameters, as well as a pageChanged function to update the list when a different page is selected in the page navigation.

app.js

  if (!$routeParams.uuid) {

    $scope.currentPage = 1;
    $scope.itemsPerPage = 6;
    $scope.query = '';

    $scope.update = function($scope) {
      $scope.offset = ($scope.currentPage - 1) * $scope.itemsPerPage;
      DocumentsService
          .getList($scope.offset, $scope.itemsPerPage, $scope.query).$promise
          .then(function(response) {
            $scope.documents = response;
            $scope.totalItems = $scope.documents['total'];
          });
    }

    $scope.update($scope);

    $scope.pageChanged = function() {
      $scope.update($scope);
    };

    $scope.search = function() {
      $scope.update($scope);
    }

  }

View

A page navigation is added to the documents-list view using UI Bootstrap's uib-pagination directive, bound to the various pagination parameters and the pageChanged function.

documents-list.html

<uib-pagination total-items="totalItems" ng-model="currentPage" items-per-page="itemsPerPage" ng-change="pageChanged()"></uib-pagination>

Experiments

  • The itemsPerPage parameter is hardcoded in the app. Can you make it configurable through a dropdown?

Summary

In this step the app's document list view was extended with paging. This concludes the tutorial. If you have any questions or suggestions please use the forum!

Previous - Code Diff

Did you find this page helpful?
How could this documentation serve you better?
On this page
    Did you find this page helpful?
    How could this documentation serve you better?