CODEWITHSUNDEEP
javascriptangularjspagination
user2948246
user2948246

Reputation: 77

Using pagination on a table in AngularJS

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;
    };
    }
    })();

Upvotes: 2

Views: 3863

Answers (3)

Sahil Saini
Sahil Saini

Reputation: 250

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

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

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

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

  1. Then in tr tag add given line of code : 
 <tr  dir-paginate="comments in
 pg.comment|orderBy:sortKey:reverse|filter:search|itemsPerPage:10">

  1. 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>

Upvotes: 5

Niedes
Niedes

Reputation: 21

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" >

Upvotes: 2

shershen
shershen

Reputation: 10003

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.

Upvotes: 2

Related Questions