AngularJS client side pagination module example

Read more about this module @ www.cacodaemon.de

HTML

<link rel="stylesheet" href="netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css">
<body>
  <script type="text/ng-template" id="paginationControl.html">
    <div class="pagination text-center" ng-show="paginator.pageCount() > 1">
    <ul>
        <li ng-click="paginator.firstPage()" ng-class="paginator.isFirstPage() && 'disabled'">
            <a>
                <i class="icon-fast-backward" ng-class="paginator.isFirstPage() && 'icon-white'"></i>
            </a>
        </li>
        <li ng-click="paginator.perviousPage()" ng-class="paginator.isFirstPage() && 'disabled'">
            <a>
                <i class="icon-step-backward" ng-class="paginator.isFirstPage() && 'icon-white'"></i>
            </a>
        </li>
        <li ng-click="paginator.setPage(i)" ng-repeat="i in [] | forLoop:paginator.lowerLimit():paginator.pageCount() | limitTo : paginator.limitPerPage" ng-class="paginator.page==i && 'active'"> 
            <a> 
                <i>{{i+1}}</i> 
            </a> 
        </li>
        <li ng-click="paginator.nextPage()" ng-class="paginator.isLastPage() && 'disabled'">
            <a>
                <i class="icon-step-forward" ng-class="paginator.isLastPage() && 'icon-white'"></i>
            </a>
        </li>
        <li ng-click="paginator.lastPage()" ng-class="paginator.isLastPage() && 'disabled'">
            <a>
                <i class="icon-fast-forward" ng-class="paginator.isLastPage() && 'icon-white'"></i>
            </a>
        </li>
    </ul>
</div>
  </script>
  <div class="container" ng-controller="TestCrtl">
      <h1>AngularJS client side pagination module example</h1>
      <h2><a target="_blank" href="http://www.cacodaemon.de/">by cacodaemon.de</a></h2>
      <table class="table table-bordered table-condensed">
          <thead>
              <tr>
                  <td>Value<td>
              </tr>
          </thead>
          <tbody>
              <tr ng-repeat="value in testValues |...

CSS

@import url('http://getbootstrap.com/2.3.2/assets/css/bootstrap.css');

JavaScript

/*
 * A simple client side pagination module.
 *
 * By Guido Krömer <[email protected]>
 * */
angular.module('caco.ClientPaginate', [])

    .filter('paginate', function(Paginator) {
        return function(input, rowsPerPage) {
            if (!input) {
                return input;
            }

            if (rowsPerPage) {
                Paginator.rowsPerPage = rowsPerPage;
            }
            
            Paginator.itemCount = input.length;

            return input.slice(parseInt(Paginator.page * Paginator.rowsPerPage), parseInt((Paginator.page + 1) * Paginator.rowsPerPage + 1) - 1);
        }
    })

    .filter('forLoop', function() {
        return function(input, start, end) {
            input = new Array(end - start);
            for (var i = 0; start < end; start++, i++) {
                input[i] = start;
            }

            return input;
        }
    })

    .service('Paginator', function ($rootScope) {
        this.page = 0;
        this.rowsPerPage = 20;
        this.itemCount = 0;
        this.limitPerPage = 5;

        this.setPage = function (page) {
            if (page > this.pageCount()) {
                return;
            }

            this.page = page;
        };

        this.nextPage = function () {
            if (this.isLastPage()) {
                return;
            }

            this.page++;
        };

        this.perviousPage = function () {
            if (this.isFirstPage()) {
                return;
            }

            this.page--;
        };

        this.firstPage = function () {
            this.page = 0;
        };

        this.lastPage = function () {
            this.page = this.pageCount() - 1;
        };

        this.isFirstPage = function () {
            return this.page == 0;
        };

        this.isLastPage = function () {
            return this.page == this.pageCount() - 1;
        };

        this.pageCount = function () {
            return Math.ceil(parseInt(this.itemCount)...