Complete client-side pagination with a simple angular filter and directive


Angular Core Dependency: 1.3.15

Module License: MIT

Added by: Sam Deering





Stars: 3

Watchers: 3

Forks: 0

Module Description

angular-st-pagination Bower Version

Provides complete client-side pagination with a simple angular filter and directive.

Build Status Test Coverage Dependency Status Code Climate

bower install angular-st-pagination --save-dev

Script path and basic usage.

<script src="bower_components/angular-st-pagination/angular-st-pagination.min.js>

// module dependency
    angular.modules('myApp', ['stPagination']);

// pagination filter and directives
  <li ng-repeat="user in users | stPagination">{{ }}</li>
<st-pagination collection="users"></st-pagination>
<st-pagination-limit collection="commits" limits="[5,10,20,50,100]"></st-pagination-limit>

Check the example page!

Release Notes


Complete pagination logic

Just use the pagination filter with an array and the logic is handled by the library. It is as simple as this example: user in users | pagination.

Fixed number of elements

The number of page links never changes and prevents the pagination to cause line breaks.

Configurable for CSS frameworks

Configure the html structure of the pagination directive to use it with the popular CSS frameworks Bootstrap, Zurb Foundation and Semantic UI.

Angular compatibility (1.3.x, 1.2.x, 1.0.x)

Angular is moving fast, but the compatibility is tested for all stable minor releases 1.0.x, 1.2.x and 1.3.x.


stPagination filter

Initialized the pagination and returns a new limited sub-array with an offset controlled by a stPagination directive. The initialized pagination object handles the filtering, correct calculation of offsets and pages.

  • inputCollection - Source array to be paginated
  • originalCollection (optional) - Required if the pagination filter is chained with others

Basic usage

  <li ng-repeat="user in users | pagination">
      {{ }}

Usage with other filters

  <li ng-repeat="user in users | filter:userFilter | pagination:users">
      {{ }}


stPagination directive

Displays the pagination. Array must be initialized with the stPagination filter.

  • collection - Array that was initialized by the stPagination filter
  • midRange (optional - default: 3) - Number of page links before and after current index
  • edgeRange (optional - default: 3) - Number of page links at the start and end

Basic usage

<st-pagination collection="users"></st-pagination>

Configure number of displayed page links

<st-pagination collection="users" mid-range="2" edge-range="2"></st-pagination>



Provides methods to configure default values and the pagination template.

Default values

angular.module('myModule', ['stPagination']).config(function (stPaginationProvider) {
    stPaginationProvider.setDefaultLimit(10); // actual default is 10
    stPaginationProvider.setDefaultMidRange(3); // actual default is 3
    stPaginationProvider.setDefaultEdgeRange(3); // actual default is 3


// predefined templates ('list', 'divWrappedList', 'bootstrap3', 'bootstrap2', 'zurbFoundation', 'semanticUi')
stPaginationProvider.setTemplateConfig({templateKey: 'bootstrap2'});

// custom structure configuration
    templateConfig: {
        divWrapped: true,
        selectedClass: 'active',
        disabledClass: 'disabled'

// custom template with templateUrl
stPaginationProvider.setTemplateConfig({templateUrl: 'templates/pagination.html'});

// custom template template
stPaginationProvider.setTemplateConfig({template: '<div></div>'});


stPaginationLimit directive

Displays a select element to change the number of items per page. Array must be initialized with the pagination filter.

  • collection - Array that was initialized by the stPagination filter
  • limits (optional - default: [10, 20, 50]) - Limit options for the select element.

Basic usage

<st-pagination-limit collection="users"></st-pagination-limit>

Configure limit steps

<st-pagination-limit collection="users" limits="[5,10,20,50,100]"></st-pagination-limit>


stPageInfo filter

Displays information about pagination properties. Array must be initialized with the pagination filter.

  • displayKey - selects an information to be displayed
    • 'total' - number of elements in the collection
    • 'currentPage' - index of the current page
    • 'totalPages' - total number of pages
    • 'startIndex' - index of the first page
    • 'stopIndex' - index of the last page

Basic usage

{{ users | stPageInfo:'total' }}
{{ users | stPageInfo:'currentPage' }}
{{ users | stPageInfo:'totalPages' }}
{{ users | stPageInfo:'startIndex' }}
{{ users | stPageInfo:'stopIndex' }}


To build the project use the following commands.

npm install
bower install

Tests can be run with:

grunt test

The demo app can be started for dev and dist using:

grunt connect:dev
grunt connect:dist


  • Use issues for bug reports or feature ideas

Module stats last updated: 2015-06-08 00:31:09

Disclaimer: Some data on this page may have been gathered from the authors GitHub respository. If you see any mistakes or outdated information please let us know. Thanks!