Pagination

The pagination component allows you to display list data across multiple pages. The component uses the bb-pagination and bb-pagination-content directives in conjunction with the bbPaging service.

The bb-pagination-content directive wraps the paged content to maintain a constant height regardless of the page content. When the list data is bound, the wrapper sets the height based on the largest page so that the height does not fluctuate. When the list exceeds the number of items that fit on a page, the bb-pagination directive displays a pagination control. The bbPaging service wraps the paged data and responds to changes in the pagination directives.

Pagination settings

  • bb-pagination — When the paged data that the bbPaging service initializes exceeds the number of items that fit on a page, this directive displays a pagination control.
  • bb-pagination-disabled — Determines whether the user can interact with the pagination control.
  • bb-pagination-content — Wraps the paged data that the bbPaging service initializes to maintain a constant height regardless of the page content.

Paging settings

The bbPaging service wraps paged data, and you can pass an optional object to bbPaging.init() to edit its display properties.

  • currentPage — Specifies the initial page to display. (Default: 1)
  • itemsPerPage — Specifies the number of items to display per page. (Default: 5)

Demo

Paged data
{{item.text}}

Markup

<div ng-controller="PaginationTestController as paginationCtrl">
  <div bb-pagination-content="paginationCtrl.itemsPaged">
    <table class="table">
      <thead>
        <tr>
          <th>Paged data</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in paginationCtrl.itemsPaged.items">
          <td>{{item.text}}</td>
        </tr>
      </tbody>
    </table>
  </div>
  <div bb-pagination="paginationCtrl.itemsPaged"></div>
</div>

JavaScript

/*global angular */
(function () {
    'use strict';

    function PaginationTestController(bbPaging) {
        var items = [
            {text: 'Item 1'},
            {text: 'Item 2'},
            {text: 'Item 3'},
            {text: 'Item 4'},
            {text: 'Item 5'},
            {text: 'Item 6'},
            {text: 'Item 7'},
            {text: 'Item 8'},
            {text: 'Item 9'},
            {text: 'Item 10'},
            {text: 'Item 11'},
            {text: 'Item 12'}
        ],
        self = this;

        self.itemsPaged = bbPaging.init(items);
    }

    PaginationTestController.$inject = ['bbPaging'];

    angular.module('stache').controller('PaginationTestController', PaginationTestController);
}());