A simple way of doing pagination with Angular UI

In the last few days I have been developing a tool to work with Google fusion tables. In this I display results for a search query in a table with pagination. I found a lot of different ways to do this but I finally ended up with this.

?

1 2 3 4 5 6 7 8 9 10 11 12

<table class="table table-striped">    <thead>       <tr>          <th ng-repeat="column in queryResult.columns">{{column}}</th>       </tr>    </thead>    <tbody>       <tr ng-repeat="row in queryResult.rows.slice(((currentPage-1)*10), ((currentPage)*10)) track by $index">          <td ng-repeat="cell in row track by $index">{{cell}}</td>       </tr>    </tbody> </table>

The relevant part in this is row in queryResult.rows.slice(((currentPage-1)*10), ((currentPage)*10)) track by $index. 

I using the currentPage variable from the Angular UI pagination component in combination with the javascript array slice method to split the result up in pages. Simple and efficient.

Here is a plunker with an example

The limitation of this being that you have to load the entire result at once. Pagination is entirely on the client side and not in the query.

Further reading

This is the book I'm reading to learn AngularJS. Very good and very well formatted for kindle.