Series: Tables of Data

Client-side Pagination Part 2-Previous/Next Page Buttons, Change Page Size

Published on Apr 05, 2015

We expand on our basic client-side pagination, adding a few more features, including buttons to go to the next page, the previous page, and buttons to change the page size.




In the last episode, we did the basics of Client-side Pagination. We can click these and it changes the page. However, there's usually a few more features involved in a full Client-side Pagination setup.

Previous and Next Page Buttons

We'll want a previous page button here, and a next page button here. We'll also want to be able to change the number of items that are on a page.

Let's start by adding a previous page button. We'll need to make it an action, instead of a link-to, because we don't want to be on the first page and hitting previous page, and it taking us to something empty.

Let's go to our post controller, and create our action. Our previous page action is first going to check whether the page number is greater than zero, and if it is, it will subtract one from the page number.

Our next page method does something similar, and let's go ahead and add that after the each, so let's check to see if this works. Hit the previous page, and it takes us back one, but it doesn't take us off the edge, and the same with next page.

Change Page Size

Now that we've gotten the previous and next page sorted out, let's figure out how to change the number of items that are on the current page, because sometimes you want to look at more than just 10 items at a time. What we'll want is a set of options that we can click on to change the number of items.

To start, we'll need to change the page size. Make it so that it is one of the query-params, and then we'll need our array of possible page sizes. We'll let them be 10, which is our current one, 25, 50, and 100. Then, in our handlebars template, let's add the controls for that.

Here we just have some styling, and then we're looping through the possible page sizes. Then we have a button which calls the change page size action, which we'll be making in a little bit, and then we have our class, which could be highlighted, or not, depending on whether the new size is equal to the current size. Then, we show the new possible size.

Let's go over to the post controller to implement the action. Change page size takes the new page size, and eventually it's going to set the page size to the new page size, but first it does some calculations. It does these because let's say that you're on page 18, with a current page size of 10. Then, if you change your page size to 50, there will no longer be a page 18, so we want to calculate where you would be in the new set of pages. That's what this does.

Another option is to simply set you at the first page every time, so let's see this in action. We see that we're on page 18, and we're going to hit this, and we have changed to page 7. This is highlighted. We have 25 items showing in this page, and they include a lot of the ones that were showing before.

This is a full implementation of Client-side Pagination. I hope you find this useful in your own apps.

Tables of Data

Subscribe to our mailing list