Series: Tables of Data

Client-side Pagination Part 1-Basics

Published on Apr 04, 2015

Pagination is a commonly requested feature. Here we show basic pagination- using many Ember 1.11 features, including each loop indices and inline if statements.




Pagination is a commonly requested feature in a client-side app. The reasons requested is because: Let's say you have a bunch of posts; 200 in this example. You don't want them all displaying on the same page, you want them split up between different pages. Pagination is how you do that.

Today, we're going to tackle client-side pagination, where all the records have already loaded. When a JSON API pagination standardization comes out, we will do a screen-cast on how to do server-based pagination as well.

Cutting it into pages

To start, we're going to add default values for page number and page size. We're going to start pageNumber at 0, because it's zero indexed, and then pageSize at 10; and that's arbitrary. Next, we're going to split up our content into pages, based on the content that's there, the page size and which way it's sorted. Sort ascending is there because changing sort ascending changes the order of arranged content, yet it doesn't trigger the observers of arranged content.

So we start off with an empty array of pages, we get a copy of the arranged content, and then we go through the arranged content, slicing off parts of it in the amount of the page size. And then we return that array of arrays. We'll also need something to select which page we're on based on the page number. That's the job of paginated content: It'll take the pages array and then the page number and then just select one item from the array. Then, in our handlebars template, we'll replace arranged content with paginated content. That makes it so we're only showing ten records at a time.

Choosing the page

However, we currently don't have a way to change which ten records we're showing. Let's fix that by having a list of pages that we can click. We'll put in this chunk of code here, which includes a little bit of styling, and then it has an each loop that lists out the pages. It uses the index, which is a new feature in Ember 1.11. It gives the number of the index of that item. So we can see that in action, here. However, there are two problems right now. The first is that it's zero based instead of starting at one. The second is that you can't click anything. So we'll start by fixing the zero base problem. We'll make a handlebars helper called add-one, which adds one, and then we'll put it there in front of the index. Now, they start at one.

To make this a link, let's use a link-to helper; it'll point to posts. The real meat of it will be in the query-params, where we change the page number to the index. Let's also give it a tag name of, "Button," because, I know because I made this thing, that it's going to look better. Let's test this out. It doesn't seem to be doing thing. That is because page number is not exactly query-params yet. Let's fix that. With that fixed, our links work. Everything's working, but we can't tell what page we're on unless we look up here at the query-params. Let's fix that by giving a visual indicator. One great way to do that is to compare the index of the current page to the page number. There's no way to compare the index to the page number using just the controller.

In the early days of Ember, you would've had to use an item controller to compare, and more recently you would've had to use component. Thanks to subexpressions and an inline if, there's an easier way; you don't have to create a component just for this one tiny case. Let's create a span tag that wraps around this link-to post. Within the span tag, we'll give it a class, and we'll make that class depend on whether index and page number are equal. If they are, then we'll give them bold and big text class. es-equal is defined just how you'd expect: Taken two values and compare them. If index and page number are equal, it's going to be bold and big text. Let's see it in action.

Next time: more features

That is the basics on pagination. Along the way, we used the new index syntax for the each loop from Ember 1.11; we reviewed the handlebar subexpressions from episode 24; and we used the new inline if from Ember 1.11. We combined these in order to avoid creating a new component. With just one line, we avoid creating an entire class. In the next episode, we're going to be adding previous and next buttons, as well as a way to change the number of items shown on a page. I'll see you then.

Tables of Data

Subscribe to our mailing list