can't get my "next" pagination button to load cards (numbered buttons work fine)

Question

I have my pagination numbers working but just can't seem to get my "next" or "previous" buttons to work properly. I have a relatively simple set up using bootstrap 5 and jQuery in which I load my cards from an array. It seems my issue has to do with the currentPage variable in my displayList function (currently passing as a number but have also tried as a string). I'm not sure exactly what the problem is since the code is so similar to the code that has the individual page numbers working. Any help would be greatly appreciated!

my html:

<!-- *** Cards Container *** -->
<div class="container-fluid mt-5">
    <div class="row row-cols-1 row-cols-md-5 g-4" id="cards">
          <!-- individual cards added here by javaScript -->
    </div>
</div>


<!-- *** Pagination Bar *** -->
<div class="container-fluid mt-5">
    <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-end">
          <li class="page-item" id="prev">
            <a class="page-link" href="#" tabindex="-1" aria-disabled="true" id="previous">Previous</a>
          </li>
          <div class="d-flex" id="pagination">
            <!-- page numbers added here by javaScript -->
          </div>
          <li class="page-item" id="nex">
            <a class="page-link" id="next" href="#">Next</a>
          </li>
        </ul>
    </nav>
</div>

My JS

const posters = [
{ id: '1', img: 'libs/images/pdfFile.jpg', title: 'Headache Treatments', author: 'Sam Smith', category: 'treatments' },
{ id: '2', img: 'libs/images/pdfFile.jpg', title: 'Treatments', author: 'Dave Smith', category: 'illness' },
{ id: '3', img: 'libs/images/pdfFile.jpg', title: 'Pain', author: 'Sam Smith', category: 'illness' },
{ id: '4', img: 'libs/images/pdfFile.jpg', title: 'Flu Symptoms', author: 'Bob Burke', category: 'illness' },

<!-- *** this continues for a total of 64 objects *** -->
]

const cardElement = $('#cards');
const paginationElement = $('#pagination');

let currentPage = 1;
let rows = 10;

function displayList (items, wrapper, rows_per_page, page) {
    wrapper.html("");
    page--; 

    let start = rows_per_page * page;
    let end = start + rows_per_page;
    let paginatedItems = items.slice(start, end);

    for (let i = 0; i < paginatedItems.length; i++) {
        wrapper.append(`
        <div class="col">
            <div class="card">
            <img
                src=${paginatedItems[i].img}
                class="card-img-top"
                alt="..."
            />
                <div class="card-body">
                    <h6 class="card-title">${paginatedItems[i].title}</h6>
                </div>
                <div class="card-footer">
                    Category: ${paginatedItems[i].category}<br>
                    Author: ${posters[i].author}
                </div>
            </div>
        </div>    
      `)
    };
}

function setupPagination (items, wrapper, rows_per_page) {
    wrapper.html("");

    let page_count = Math.ceil(items.length/rows_per_page) + 1;

    for (let i = 1; i < page_count; i++) {
        let btn = paginationButton(i, items);
        wrapper.append(btn);
    }

}

function paginationButton (currentPage, items) {
    console.log(currentPage);
    $( "#next" ).click(function() {
        currentPage = parseInt(currentPage) + 1 ;
        
        displayList(items, cardElement, rows, currentPage);
      });
    
    $(document).on("click", "ul.pagination li a", function(e){
        $("ul.pagination li").removeClass('active');
        currentPage = $(this).text();
        displayList(items, cardElement, rows, currentPage);

        if (currentPage == $(this).text()){
            $(this).parent('li').addClass('active');
        } 
    });

    return `<li class="page-item"><a class="page-link" href="#">${currentPage}</a></li>`
}

displayList(posters, cardElement, rows, currentPage);

setupPagination(posters, paginationElement, rows);

Answer 1

Your prev and next buttons' classes are the same as your regular pagination elements, which makes them fire twice, the second time with an invalid value "next" or "prev". You also have triggers being created every time you render something, bad idea :P

I refactored your code a bit, and it seems to be working.

• I didn't mess up with the previous button, which doesn't seem to be working at the moment
• You also need to consider what happens when you reach the first and last pages, otherwise this will break :P
• Finally, you might need to do some extra magic to select the right page when clicking the next and previous buttons.

const posters = [
{ id: '1', img: 'libs/images/pdfFile.jpg', title: 'Headache Treatments', author: 'Sam Smith', category: 'treatments' },
{ id: '2', img: 'libs/images/pdfFile.jpg', title: 'Treatments', author: 'Dave Smith', category: 'illness' },
{ id: '3', img: 'libs/images/pdfFile.jpg', title: 'Pain', author: 'Sam Smith', category: 'illness' },
{ id: '4', img: 'libs/images/pdfFile.jpg', title: 'Flu Symptoms', author: 'Bob Burke', category: 'illness' },
{ id: '5', img: 'libs/images/pdfFile.jpg', title: 'Headache Treatments', author: 'Sam Smith', category: 'treatments' },
{ id: '6', img: 'libs/images/pdfFile.jpg', title: 'Treatments', author: 'Dave Smith', category: 'illness' },
{ id: '7', img: 'libs/images/pdfFile.jpg', title: 'Pain', author: 'Sam Smith', category: 'illness' },
{ id: '8', img: 'libs/images/pdfFile.jpg', title: 'Flu Symptoms', author: 'Bob Burke', category: 'illness' },
{ id: '9', img: 'libs/images/pdfFile.jpg', title: 'Headache Treatments', author: 'Sam Smith', category: 'treatments' },
{ id: '10', img: 'libs/images/pdfFile.jpg', title: 'Treatments', author: 'Dave Smith', category: 'illness' },
{ id: '11', img: 'libs/images/pdfFile.jpg', title: 'Pain', author: 'Sam Smith', category: 'illness' },
{ id: '12', img: 'libs/images/pdfFile.jpg', title: 'Flu Symptoms', author: 'Bob Burke', category: 'illness' },

<!-- *** this continues for a total of 64 objects *** -->
]

const cardElement = $('#cards');
const paginationElement = $('#pagination');

let currentPage = 1;
let rows = 10;

function displayList (items, wrapper, rows_per_page, page) {
        console.log('Navigate to', page);

    wrapper.html("");
    page--; 

    let start = rows_per_page * page;
    let end = start + rows_per_page;
    let paginatedItems = items.slice(start, end);

    for (let i = 0; i < paginatedItems.length; i++) {
        wrapper.append(`
        <div class="col">
            <div class="card">
            <img
                src=${paginatedItems[i].img}
                class="card-img-top"
                alt="..."
            />
                <div class="card-body">
                    <h6 class="card-title">${paginatedItems[i].title}</h6>
                </div>
                <div class="card-footer">
                    Category: ${paginatedItems[i].category}<br>
                    Author: ${posters[i].author}
                </div>
            </div>
        </div>    
      `)
    };
}

function setupPagination (items, wrapper, rows_per_page) {
    wrapper.html("");

    let page_count = Math.ceil(items.length/rows_per_page) + 1;

    for (let i = 1; i < page_count; i++) {
        let btn = paginationButton(i, items);
        wrapper.append(btn);
    }
}

function paginationButton (currentPage, items) {
    console.log(currentPage);  
    
    return `<li class="page-item"><a class="page-link" href="#">${currentPage}</a></li>`
}

displayList(posters, cardElement, rows, currentPage);

setupPagination(posters, paginationElement, rows);
    
$( "#next" ).on("click", function() {
  currentPage = parseInt(currentPage) + 1 ;
  displayList(posters, cardElement, rows, currentPage);
});

$(document).on("click", "ul.pagination li a:not(.static)", function(e){
  $("ul.pagination li").removeClass('active');
  currentPage = $(this).text();
  displayList(posters, cardElement, rows, currentPage);

  if (currentPage == $(this).text()){
    $(this).parent('li').addClass('active');
  } 
});

<!-- *** Cards Container *** -->
<div class="container-fluid mt-5">
    <div class="row row-cols-1 row-cols-md-5 g-4" id="cards">
          <!-- individual cards added here by javaScript -->
    </div>
</div>


<!-- *** Pagination Bar *** -->
<div class="container-fluid mt-5">
    <nav aria-label="Page navigation example">
        <ul class="pagination justify-content-end">
          <li class="page-item" id="prev">
            <a class="page-link static" href="#" tabindex="-1" aria-disabled="true" id="previous">Previous</a>
          </li>
          <div class="d-flex" id="pagination">
            <!-- page numbers added here by javaScript -->
          </div>
          <li class="page-item" id="nex">
            <a class="page-link static" id="next" href="#">Next</a>
          </li>
        </ul>
    </nav>
</div>