Angular Paging Directive

Angular Paging

A directive to aid in paging large datasets while requiring the bare minimum of actual paging information. We are very dependant on the server for "filtering" results in this paging scheme. The central idea being we only want to hold the active "page" of items - rather than holding the entire list of items in memory and paging on the client-side.

Basic Sample

The simplest example for the paging directive
Use the text boxes to adjust directive settings for each example below
For advanced settings you will need to click the apply button

Current Page:

Page Size:

Total Items:

OnClick and Href Sample

View the console.log to see onClick action
Notice the URL after clicking a page below
The text setting {page} will insert the page number in the href

Href:

Dots Display:

Adjacent Count:

Apply Settings

Boolean Flag Sample

By default all flags are set to false
Many of the settings will apply to other samples on this page

Is Disabled:	{{isDisabled}}
Hide if Empty:	{{hideIfEmpty}}
Scroll Top:	{{scrollTop}}
Show Prev Next:	{{showPrevNext}}
Show First Last:	{{showFirstLast}}

Apply Settings

Text and Title Sample

The text {page} will insert the page number in all the text title page attribute

Text First:

Text Previous:

Text Next:

Text Last:

Apply Settings

Text Title Page:

Text Title First:

Text Title Previous:

Text Title Next:

Text Title Last:

Apply Settings

CSS First Last, Next Prev Sample

Using Bootstraps glyphicons css by default

Next Class:

Previous Class:

First Class:

Last Class:

Apply Settings

CSS List Item Sample

Using Bootstraps paging css by default
Disabed class is applied to the dots item

UL Class:

Active Class:

Disabled Class:

Apply Settings

Reference Links

Github - https://github.com/brantwills/Angular-Paging
npm - https://www.npmjs.org/package/angular-paging
Brant Wills - http://brantwills.com
@brantwills - http://twitter.com/brantwills