Using pagination on a table in AngularJS

Question

Using pagination on a table in AngularJS

3.7k Views Asked by user2948246 At 22 December 2024 at 23:17

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

Original Q&A

There are 3 best solutions below

shershen On 08 June 2015 at 22:38

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.

Niedes On 19 September 2015 at 12:04

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

**Sahil Saini** · Accepted Answer

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>

Using pagination on a table in AngularJS

There are 3 best solutions below

Related Questions in JAVASCRIPT

Related Questions in ANGULARJS

Related Questions in PAGINATION

Trending Questions

Popular # Hahtags

Popular Questions