angular-crispy-paginator v0.1.0

Angular crispy paginator

Installation

• Bower: bower install angular-crispy-paginator
• npm: npm install angular-crispy-paginator

Alternatively, you can download archives from releases page.

Next step is to include crispy-paginator.min.js after Angular and Lodash, since they are both mandatory dependencies.

<script src="angular.min.js"></script>
<script src="lodash.min.js"></script>
...
<script src="crispy-paginator.min.js"></script>

Finally, add crispy-paginator as dependency to your application:

angular.module('yourapp', [
  ...
  'crispy-paginator',
]);

Usage

The simplest possible scenario is to provide just current page and total number of pages:

$scope.currentPage = 2;
$scope.totalPages = 10;

<crispy-paginator current-page="currentPage" total-pages="totalPages"></crispy-paginator>

Changing of actual elements is up to parent scope depending on values in currentPage and totalPages.

Settings

Application-wise defaults can be set inside config block:

app.config(function (CrispyPaginatorProvider) {
  CrispyPaginatorProvider.setTemplateUrl('path/to/template.html');
});

Currently supported settings:

• setTemplateUrl / template-url - sets template url (dun dun dun)
• setVisiblePages / visible-pages - number of pages that are visible at a time
• setUseBoundaryLinks / use-boundary-links - sets whether "First" and "Last" links should be used or not
• setAlwaysShowBoundaryPages / always-show-boundary-pages - sets if first and last pages should be shown at all times. In example, if set to true, 10 11 12 will be shown as 1 ... 10 11 12 ... 100.

Default settings are:

templateUrl = 'crispy-paginator.tpl.html'
visiblePages = 10
useBoundaryLinks = true
alwaysShowBoundaryPages = false