• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

How To Paginate An Array In Javascript

Javascript · September 21, 2020

I was recently tasked with implementing pagination for an array of values (in some instances, over 2400 of them) and instead of using an existing library, I opted to write my own pagination logic and put it into an Aurelia value converter.

There are a lot of ways you can achieve this, you can use slice, you can use filter and reduce as well. The solution I ended up coming up with uses slice because it produces the easiest to read and simple code. Performance-wise, I do believe that filter comes out on top, but that isn’t our concern here.

const paginate = (items, page = 1, perPage = 10) => items.slice(perPage * (page - 1), perPage * page);

However, if you want something a little more descriptive, you can get a little more verbose and produce something that while not nearly as concise, gives you some more details.

In my instance, I wanted to return the next and previous pages, as well as the total number of pages and items for each page that is being paginated. While you get a more verbose method, it becomes a lot more useful.

const paginate = (items, page = 1, perPage = 10) => {
    const offset = perPage * (page - 1);
    const totalPages = Math.ceil(items.length / perPage);
    const paginatedItems = items.slice(offset, perPage * page);
  
    return {
        previousPage: page - 1 ? page - 1 : null,
        nextPage: (totalPages > page) ? page + 1 : null,
        total: items.length,
        totalPages: totalPages,
        items: paginatedItems
    };
};

If you’re using Aurelia, here is a value converter which will give you array pagination that can be used on a repeat.for or anywhere else you’re display items from an array. If you’re not using Aurelia, you can stop reading here, the above is what you’re after.

export class PaginateValueConverter {
    toView(array, page = 1, perPage = 10) {
        if (!array) {
            return array;
        }

        const paginationObject = paginate(array, page, perPage);

        return paginationObject.items;
    }
}

You can then use this value converter in your Aurelia applications like this:

<ul>
  <li repeat.for="item of items | paginate">${item.name}</li>
</ul>

You would probably have a currentPage variable in your view-model, where you increment the value if a button or link is pressed, maybe a row of numbers.

<ul>
  <li repeat.for="item of items | paginate:currentPage">${item.name}</li>
</ul>

Dwayne

Leave a ReplyCancel reply

1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
arthkat3
arthkat3
5 months ago

The last of the html where you loop items in the array is still vague to me. Could you please elaborate more.

0

Primary Sidebar

Popular

  • Handling Errors with the Fetch API
  • How To Get The Hash of A File In Node.js
  • How To Paginate An Array In Javascript
  • Thoughts on the Flipper Zero
  • Testing Event Listeners In Jest (Without Using A Library)

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz