Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

Practice Data Pagination

Well done!

You have completed Practice Data Pagination!

Sign up for Treehouse Back to Library

Solution: Adding Pagination Buttons

2:00 with Travis Alstrand

This video shows one way of dynamically creating and inserting the pagination buttons to the DOM.

Resources

insertAdjacentHTML() - MDN

Math.ceil() - MDN

Related Discussions

Have questions about this video? Start a discussion with the community and Treehouse staff.

Sign up

    Related Discussions

    Have questions about this video? Start a discussion with the community and Treehouse staff.

    Sign up

    Welcome back, were you able to find a solution to our three challenges? 0:00
    Don't worry if not, this was a very large and challenging practice. 0:05
    You can see my solution and then go back and try it again. 0:08
    All right, let's do this. 0:12
    For step one, I created a variable named number of buttons. 0:14
    I divided the length of the array passed to this function by the authorsPerPage 0:18
    variable, then I rounded the number up using Math.ceil. 0:23
    Next, I started a for loop to the length of my number of buttons variable. 0:27
    Since we don't want to start our pagination buttons with zero, 0:32
    I decided to start my index variable at one and loop as long as it's less than or 0:35
    equal to the number of buttons. 0:39
    You could have started with zero as we normally would and 0:42
    adjusted i in the markup below and that's totally fine. 0:45
    I just wanted to show you another approach. 0:47
    Inside the loop, I created a variable named html and set it equal to 0:49
    a template literal, holding the markup found in the index.html file. 0:55
    Instead of the hard coded number in the button's content, 1:00
    I'm dynamically adding in our index variable. 1:04
    Then I targeted the paginationList UL and 1:07
    used insertAdjacentHTML to add this markup variable at the beforeend position so 1:10
    that at the end of each loop, they are added after the previous one. 1:16
    Finally, once the loop is completed, 1:20
    I targeted the first button using querySelector on the pagination list. 1:23
    I then used classList.add to give it the active class. 1:28
    Let's see how this is looking in the browser so far. 1:32
    Awesome, though we haven't created any cards yet, we can see that it has created 1:36
    four pagination buttons for us and applied the active class to the first one. 1:41
    There are 11 author objects in our authors array and 1:45
    our authors per page is set to 3. 1:49
    So, 11 divided by 3 and rounded up is 4, perfect. 1:50
    In the next video, we'll go over the show page function. 1:55
    See you there. 1:59

    You need to sign up for Treehouse in order to download course files.

    Sign up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up