Improper pagination with AngularJS bootstrap

Question

HTML Code

<body ng-app="MyApp">
  <div ng-controller="PaginationCtrl">
    <table class="table table-striped">
      <thead>
        <tr>
          <th>Id</th>
          <th>Name</th>
          <th>Description</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="item in pagedItems">
          <td>{{item.id}}</td>
          <td>{{item.name}}</td>
          <td>{{item.description}}</td>
        </tr>
      </tbody>
      <tfoot>
        <td colspan="3">
          <div class="pagination">
            <ul>
              <li ng-class="prevPageDisabled()">
                <a href ng-click="prevPage()">« Prev</a>
              </li>
              <li ng-repeat="n in range()" ng-class="{active: n == currentPage}" ng-click="setPage(n)">
                <a href="#">{{n+1}}</a>
              </li>
              <li ng-class="nextPageDisabled()">
                <a href ng-click="nextPage()">Next »</a>
              </li>
            </ul>
          </div>
        </td>
      </tfoot>
    </table>
  </div>
</body>

Javascript

 var app = angular.module("MyApp", []);

app.factory("Item", function() {

  var items = [];
  for (var i=0; i<50; i++) {
    items.push({ id: i, name: "name "+ i, description: "description " + i });
  }

  return {
    get: function(offset, limit) {
      return items.slice(offset, offset+limit);
    },
    total: function() {
      return items.length;
    }
  };
});

app.controller("PaginationCtrl", function($scope, Item) {

  $scope.itemsPerPage = 20;
  $scope.currentPage = 0;

  $scope.range = function() {
    var rangeSize = 5;
    var ret = [];
    var start;

    start = $scope.currentPage;
    if ( start > $scope.pageCount()-rangeSize ) {
      start = $scope.pageCount()-rangeSize;
    }

    for (var i=start; i<start+rangeSize; i++) {
      ret.push(i);
    }
    return ret;
  };


  $scope.prevPage = function() {
    if ($scope.currentPage > 0) {
      $scope.currentPage--;
    }
  };

  $scope.prevPageDisabled = function() {
    return $scope.currentPage === 0 ? "disabled" : "";
  };

  $scope.nextPage = function() {
    if ($scope.currentPage < $scope.pageCount() - 1) {
      $scope.currentPage++;
    }
  };

  $scope.nextPageDisabled = function() {
    return $scope.currentPage === $scope.pageCount() - 1 ? "disabled" : "";
  };

  $scope.pageCount = function() {
    return Math.ceil($scope.total/$scope.itemsPerPage);
  };

  $scope.setPage = function(n) {
    if (n > 0 && n < $scope.pageCount()) {
      $scope.currentPage = n;
    }
  };

  $scope.$watch("currentPage", function(newValue, oldValue) {
    $scope.pagedItems = Item.get(newValue*$scope.itemsPerPage, $scope.itemsPerPage);
    $scope.total = Item.total();
  });

});

Heres the fiddle.

http://jsfiddle.net/go14nac5/

When the itemsPerPage is 5 or 10 the pagination works fine but when the itemsPerPage is changed to 20 or more. The pagination has a problem, where the page numbers are displayed with negative values and zero.

Can someone help me sort this out to make a robust bootstrap pagination?

You have tagget ui.bootstrap but you don't seem to be using it. I recommend you just use the existing pagination directive in ui.bootstrap — JimL
– JimL, Commented Nov 21, 2014 at 13:34

Petr Averyanov · Accepted Answer · 2014-11-21 15:33:26Z

1

Modify range function:

  $scope.range = function() {
var rangeSize = 5;
var ret = [];
var start;

start = $scope.currentPage;
if ( start > $scope.pageCount()-rangeSize ) {
  start = $scope.pageCount()-rangeSize;
    if (start < 0) {
        start = 0;
    }
}

for (var i=start; i<start+rangeSize && i < $scope.pageCount(); i++) {
  ret.push(i);
}
return ret;
  };

answered Nov 21, 2014 at 15:33

Petr Averyanov

9,5963 gold badges25 silver badges41 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Improper pagination with AngularJS bootstrap

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related