Angular Directive of Pagination

Added by: Sam Deering





Stars: 3

Watchers: 3

Forks: 2


Pochen Lin
Pochen Lin

Module Description


Angular Directive for Data Pagination. by Po Chen Lin

##How to Use

  1. Declare paginator directive in your module.

    function Paginator(){ ... }
  2. Declare startFrom filter in your module.

    function startFrom() { ... }
  3. In controller, create model for binding. (data, curPage, pageSize, pagerSize)

    // use controller as viewmodel or old fashion $scope for view = data; // array of data
    this.curPage = 1; // current page. External function can change page with this
    this.pageSize = 10; // how many items per page
    this.pagerSize = 5; // how many pagers in paginator (odd number recommended)
  4. Create remote template for paginator (Customize for your own need)

    <button ng-disabled="curPage == 1" ng-click="prev()">Prev</button>
    <button ng-repeat="p in pagers()" ng-disabled="this.p == curPage" ng-click="goPage(this.p)">{{p}}</button>
    <button ng-disabled="curPage >= maxPage()" ng-click="next()">Next</button>
  5. In html view, you can use directive in controller scope like this.

    // element style 
    <paginator data="" cur-page="main.curPage" page-size="main.pageSize" pager-size="main.pagerSize"></paginator>
    // ngRepeat for each page (where startFrom filter kickin)
    <li ng-repeat="p in | startFrom:(main.curPage-1)*main.pageSize | limitTo:main.pageSize">{{}} - {{}}</li>
    // Attribute style
    <div data="" cur-page="main.curPage" page-size="main.pageSize" pager-size="main.pagerSize" paginator></div>

for detail, check out the example code.

##License The MIT License (MIT)

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!