Skip to content Skip to sidebar Skip to footer

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

Solution 1:

  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>

Solution 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:

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

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

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

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

Solution 3:

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

Post a Comment for "Using Pagination On A Table In Angularjs"