Adding Pagination to AngularJS Table

Question

So I am getting some dynamic data and am able to get it to display, but I now want to add some pagination, I have seen that there are modules that can do this but with my limited experience with Angular I haven't been able to get one to work. Below is my table in my HTML, and basically in my Javascript I am running a REST POST call that returns the data and display it in the table below, however if I wanted to use pagination instead of displaying the whole table, how would I do so, I'm not trying to do anything fancy but I have tried some Jquery plugins in addition to the angularjs modules have not figured it out, I thought there may be a way to do this with a simple table like shown below, if anyone has any advice I'd appreciate it.

<table class="table table-striped">
  <tr>
    <th><b>ID</b></th>
    <th><b>Score</b></th>
    <th><b>Number</b></th>
  </tr>

  <tr ng-repeat="data in restCtrl.results">
    <td>{{ data.id }}</td>
    <td>{{ data.score }}</td>
    <td>{{ data.number }}</td>
  </tr>
</table>

Greg · Accepted Answer · 2015-04-10 19:38:42Z

1

You can have use ng-repeat="data in restCtrl.results | filter : paginate" with $resource:

http://plnkr.co/edit/79yrgwiwvan3bAG5SnKx?p=preview

answered Apr 10, 2015 at 19:38

Greg

4731 gold badge6 silver badges19 bronze badges

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

3 Comments

U.S. Coding Team - Benchwarmer Over a year ago

So other than getting the pagination options to display, I haven't gotten it to work, I replaced my ng-repeat with what you put above, I put the <pagination></pagination> under my table, and then i added the function to my javascript file but none of the buttons work.

Greg Over a year ago

Do not forgot to load angular-resource.js

Jackal Over a year ago

this has a flaw which only orders the data on the current page if if it's desc

Collectives™ on Stack Overflow

Adding Pagination to AngularJS Table

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related