Custom JavaScript pagination of objects

Written by

Walter G.

Comments

1

Published on

October 16 2019

Modified on

December 17 2020

Filed under

javascript

This is a follow up to my post How To Paginate Through A Collection In Javascript article. In this updated version I will go a bit deeper on how to paginate through more complex HTML elements using JavaScript objects and dynamic HTML element creation using the document.createElement method.

Read that article before continuing here as I will be referencing it going forward. Let's get started.

Variable declaration

Variable declaration will not change in this updated version. We are still going to rely on an array of items in order to facilitate the pagination effect.

// global JavaScript variables

var list = new Array();
var pageList = new Array();
var currentPage = 1;
var numberPerPage = 1;
var numberOfPages = 1;   // calculates the total number of pages

We can set the default currentPage to 1, and for this example I will only be showing 1 element per page to keep things simple. The numberOfPages variable will be updated once we load our data into the primary list.

Creating your data

In this updated version, we are going to be working with more complex data structures, instead of just a list of numbers as I did before. This will more specifically depend on where you are getting your data from. But let's assume that you are rendering a fixed set of user profile records in this particular case.

    function makeList() {
    let person1 = {
        name: 'Rick R.',
        location: 'Los Angeles, CA',
        profilepic: 'profile1.png'
        };
        
        let person2 = {
            name: 'Lucy R.',
            location: 'Los Angeles, CA',
            profilepic: 'profile2.png'
        };
            
        let person3 = {
            name: 'William F.',
            location: 'Los Angeles, CA',
            profilepic: 'profile3.png'
        };
            
        list.push(person1);
        list.push(person2);
        list.push(person3);
        
        numberOfPages = getNumberOfPages();
}

Again, this will depend on how you are retrieving your data. But essentially the process will be the same. You will need to create an object for each item record that you wish to display and then push that object onto the primary list array.

The getNumberOfPages() function is defined in the original article and it determines the total number of pages that will need to be rendered.

The next update comes in the drawList() method, which will now need to traverse through the collection of objects and generate the desired HTML elements for each page.

DrawList()

We can start by clearing the current page and setting it's innerHTML to an empty string. We are then going to iterate through every object in our current pageList array and create the required HTML elements.

    function drawList() {
    document.getElementById("list").innerHTML = "";
    
    for (let r = 0; r < pageList.length; r++)
    {
        let obj = pageList[r];
        let div = document.createElement('div');
        let name = document.createElement('div');
        let location = document.createElement('div');
        let profilepic = document.createElement('div');
        
        name.innerHTML = obj.name;
        name.className = 'name';
        
        location.innerHTML = obj.location;
        location.className = 'location';
        
        profilepic.innerHTML = `<img src='${obj.profilepic}'/>`;
        profilepic.className = 'profilepic';
        
        div.appendChild(name);
        div.appendChild(location);
        div.appendChild(profilepic);
        
        document.getElementById("list").appendChild(div);
    }
}

You can be as complex as you would like in this step. The pagination code does not change, and once your data has been loaded and split and assigned to the pageList array, how you render the data is up to you.

I hope that you found this JavaScript pagination upgrade useful and if you have any questions (or would like to suggest improvements) please comment down below.

- Walt

Comments

M

Monika

1/28/2020 9:23:02 AM

Hi, I was wondering how would you implement data from API with fetch in this given task, and maybe print it in a table instead of a list?

reply

Add comment