0

I want to add a pagination after the data that can be displayed has exceeded the filter. I have declared that a limit of 6 data can be displayed at a time. I want to display the rest of the data by adding a pagination under the table. How do I go about doing that?

data.html

  <section>
    <div>
    <table style="width:90%"  class="table table-bordered" align="center" ng-controller="RetrieveDiaryController">
      <tr>
        <th style="width:40%">Date</th>
        <th style="width:30%">Type</th>
        <th style="width:30%">Level</th>
      </tr>
      <tr ng-repeat="d in diaries | orderBy:'date':true | limitTo : limit">
        <td>{{d.date | date: "dd-MM-yyyy"}}</td>
        <td>{{d.taken}}</td>
        <td>{{d.level}}</td>
        <tr ng-show="limit" ng-click='limit = undefined'>
      </tr>
    </table>
    </div>
   </section>

health.js

.controller('RetrieveDiaryController', ['$scope', 'Diary', function ($scope, Diary) {
       $scope.diaries = Diary.find();
       $scope.limit = 6;
    }])
sxxxxxxx
  • 565
  • 2
  • 6
  • 17
  • use a datatable library to do that for u. – Mox Aug 15 '16 at 02:20
  • There are a lot of questions teaching how paginate items.. just search it! I'd recommend this [**module**](https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination). – developer033 Aug 15 '16 at 02:20

1 Answers1

0

You can use Angular ui bootstrap pagination directive.

And then add ng-show/ng-hide on the pagination depending on number of results per page.

Igor Janković
  • 5,494
  • 6
  • 32
  • 46