• 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 Reply Cancel reply

0 Comments
Inline Feedbacks
View all comments

Primary Sidebar

Popular

  • Thoughts on the Flipper Zero
  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How To Get The Hash of A File In Node.js
  • The Most Common iPhone Passcodes (and how to guess them)
  • Wild Natural Deodorant Review
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • Improving The Coopers Australian Pale Ale Extract Tin (and other tips)
  • Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • How To Paginate An Array In Javascript

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz