How to use UI Bootstrap Pagination for a table, generated using ng-repeat

Question

I am trying to keep pagination in my Angular application using uib-pagination. I am unable to get proper way to do this.

HTML

<table id="mytable" class="table table-striped">
  <thead>
    <tr class="table-head">
      <th>Name</th>
    </tr>
  </thead>
  <tbody>
    <tr ng-repeat="person in aCandidates">
      <th>
        <div>{{person}}</div>
      </th>
    </tr>
  </tbody>
</table>

Controller

$scope.totalItems = $scope.aCandidates.length;
$scope.currentPage = 1;
$scope.itemsPerPage = 10;

I am able to see the pagination bar but no action is performed with that and the entire table data is rendered even after giving total-items as 10.

How exactly uib-pagination works and how is the data (in this case aCandidates) is linked to pagination.

Answer 1

The part you are missing is that you have to have a function to get the current page's data from your entire array. I've added a function called setPagingData() to handle this.

You can see this in the forked plunker

var app = angular.module("plunker", ["ui.bootstrap"]);

app.controller("MainCtrl", function($scope) {
  var allCandidates =
      ["name1", "name2", "name3", "name4", "name5",
       "name6", "name7", "name8", "name9", "name10",
       "name11", "name12", "name13", "name14", "name15",
       "name16", "name17", "name18", "name19", "name20"
      ];

  $scope.totalItems = allCandidates.length;
  $scope.currentPage = 1;
  $scope.itemsPerPage = 5;

  $scope.$watch("currentPage", function() {
    setPagingData($scope.currentPage);
  });

  function setPagingData(page) {
    var pagedData = allCandidates.slice(
      (page - 1) * $scope.itemsPerPage,
      page * $scope.itemsPerPage
    );
    $scope.aCandidates = pagedData;
  }
});

<link data-require="bootstrap-css@*" data-semver="4.0.0-alpha.2" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" />
<script>document.write('<base href="' + document.location + '" />');</script>
<script data-require="[email protected]" src="https://code.angularjs.org/1.4.9/angular.js" data-semver="1.4.9"></script>
<script data-require="ui-bootstrap@*" data-semver="1.3.2" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-1.3.2.js"></script>

<div ng-app="plunker">
  <div ng-controller="MainCtrl">
    <table id="mytable" class="table table-striped">
      <thead>
        <tr class="table-head">
          <th>Name</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="person in aCandidates">
          <th>
            <div>{{person}}</div>
          </th>
        </tr>
      </tbody>
    </table>
    <uib-pagination total-items="totalItems" ng-model="currentPage" items-per-page="itemsPerPage"></uib-pagination>
  </div>
</div>

Answer 2

For newer versions, change to the following code:

 <ul uib-pagination total-items="totalItems" ng-model="currentPage" items-per-page="itemsPerPage"></ul>

The <uib-pagination> tag is no longer supported. It has to be given as an attribute.