Using pagination on a table in AngularJS

Question

I am trying to paginate a table which has 500 entries, with 10 entries per page. To implement this I came across a GitHub page.

But it did not work. I would like to know what I am missing here.

Also my code ,

  <!DOCTYPE html>
  <html ng-app="plunker">

  <head>
      <meta charset="utf-8" />
      <title> Pagination example </title>
      <link rel="stylesheet" href="style.css" />
      <script src="https://code.angularjs.org/1.3.15/angular.js"></script>
      <script src="script.js"></script>

   <body ng-controller="PageDetails as pg">
     <table dir-paginate="comments in pg.comment | itemsPerPage: 10" > 
       <thead>
          <tr>
            <th>POST_ID</th>
            <th>ID</th>
            <th>NAME</th>
            <th>EMAIL</th>
            <th>BODY</th>
          </tr>
      </thead>
      <tbody>
       <tr ng-repeat="comments in pg.comment">
         <td>{{comments.postId}}</td>
         <td>{{comments.id}}</td>
         <td>{{comments.name}}</td>
         <td>{{comments.email}}</td>
         <td>{{comments.body}}</td>
       </tr>
      </tbody>
   </table>
   <dir-pagination-controls></dir-pagination-controls>
   </body>

  </html>

script.js

  (function() {

      angular.module('plunker', []);

      angular.module('plunker').controller('PageDetails', PageFn);

      function PageFn($http) {
       var pg = this;
       pg.comment = [];

      details();

      function details() {
         $http({
         method: 'GET',
         url: 'http://jsonplaceholder.typicode.com/comments'
         }).success(function(data, status) {
         console.log(data);
        pg.comment = data;
        }).error(function(data, status) {
        console.log(data);
      });
    }

    pg.add = function() {
        pg.newComment.id = pg.comment[pg.comment.length - 1].id + 1;
        pg.comment.push(pg.newComment);
        pg.newComment = null;
    };
    }
    })();

what's in your script.js ? seems that u're missing the whole angular-utils library included — shershen
– shershen, Commented Jun 8, 2015 at 22:30
what do you mean "did not work"? you only posted pieces of a plunker, and a link to a directive that you are referring to in your HTML but don't appear to have loaded the script or the dependency for.... — Claies
– Claies, Commented Jun 8, 2015 at 22:40

Sahil Saini · Accepted Answer · 2015-12-21 09:03:52Z

5

Firstly download the dirPagination.js from here.
Include the dirPagination.js file on your page like :

<script src="~/Content/dirPagination.js"></script>

After that add dir-paginate directive for pagination in script file.code given below :

angular.module('plunker', ['angularUtils.directives.dirPagination']);

Then in tr tag add given line of code :

 <tr  dir-paginate="comments in
 pg.comment|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">

Then add pagination control in your HTML page for putting buttons of First,Next,Previous and Last.Code given below :

<dir-pagination-controls max-size="10" direction-links="true" boundary-links="true" > </dir-pagination-controls>

answered Dec 21, 2015 at 9:03

Sahil Saini

2505 silver badges11 bronze badges

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

Comments

shershen · Accepted Answer · 2015-06-08 22:38:49Z

2

If you study the demo on the page of angularUtils, you can see that they use:

1) include file with the library in html:

<script src="dirPagination.js"></script>

2) angular utility library is included as a dependancy in the application, see in script.js

var myApp = angular.module('myApp', ['angularUtils.directivses.dirPagination']);

So you need to add those 2 things in your app file to make pagination to work.

answered Jun 8, 2015 at 22:38

shershen

10k11 gold badges44 silver badges62 bronze badges

Comments

Niedes · Accepted Answer · 2015-09-19 12:04:47Z

2

change

<table dir-paginate="comments in pg.comment | itemsPerPage: 10" >

to

<table>

then change

<tr ng-repeat="comments in pg.comment">

to

<tr dir-paginate="comments in pg.comment | itemsPerPage: 10" >

answered Sep 19, 2015 at 12:04

Niedes

211 bronze badge

Collectives™ on Stack Overflow

Using pagination on a table in AngularJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related