Make a list with multiple pages in Jquery

Question

I'm making a page with a list of products (which are loads using ajax) but i want to show only 6 products/page but i don't know how to do it and i don't find any examples that implements what i want. So for example if i have 20 products i want to show 6 in the first page, 6 in the second, .. etc to the last product in the last page (the page is always the same only the products change). So in the end of the page i must have page 1-n Can someone help me? this is the js that load the products and show them one below the other:

$(document).ready(function () {
  $.ajax({
    type: "GET",
    url: "json/projects.json",
    dataType: "json",
    success: function (data) {
      showInfo(data);
    },
  });
});

function showInfo(data) {
  var htmlString = "";

  if (data.length == 0) {
    htmlString =
      "<span id = " +
      "message>" +
      "Non è stato trovato alcun progetto" +
      "</span>";
    $("#list").append(htmlString);
  } else {
    //altrimenti stampo data
    for (i = 0; i < data.length; i++) {
      //scorro tutto il mio file json
      htmlString =
       "<div class = " + "project id = " + data[i].id + ">" + 
        "<div class =" + "row-list>" +
        "<div class = " + "title>" + data[i].title + "</div>" +
        "<div class = " + "info>" + "<img src = " + "img/user.png>" + data[i].username + "</div>" +
        "<div class = " + "info>" + "<img src = " + "img/budget.png>" + data[i].budget + "</div>" +
        "<div class = " + "info>" + "<img src = " + "img/data.png>" + data[i].data + "</div>" +
        "<div class = " + "flag>" + data[i].flag + "</div>" +
      "</div>";

      // collego al div #list le informazioni
      $("#list").append(htmlString);
    }

    // aggiungo l'handler per visualizzare i dettagli quando un progetto viene cliccato
    $(".project").click(function () {
      window.location.href = "details.php?id=" + $(this).attr("id");
    });
  }
}

You want to use "pagination". [https://stackoverflow.com/questions/25434813/simple-pagination-in-javascript](https://stackoverflow.com/questions/25434813/simple-pagination-in-javascript) — Rob Moll, May 07 '20 at 16:51

terrymorse · Accepted Answer · 2020-05-07T19:36:45.647

If the page doesn't change, you can stay on the same page while simply changing the products shown.

Here's a simplified version to demonstrate how this could work:

// create 20 product names
  let products = [];
  for (let i=1; i<=20; i++) {
    products.push(`This is Product Name ${i}`);
  }
  let firstShown = 0;
  const display = document.getElementById('display');

  // display up to 6 products on page
  function addToDisplay(first) {
    display.innerHTML = '';
    let last = Math.min(first+5, products.length-1);
    for (let i = first; i <= last; i++) {
      let li = document.createElement('li');
      li.innerHTML = products[i];
      display.appendChild(li);
    }
  }

  function forward () {
    display.innerHTML = '';
    firstShown += 5;
    addToDisplay(firstShown);
  }

  function back () {
    display.innerHTML = '';
    firstShown = Math.max(firstShown-5, 0);
    addToDisplay(firstShown);
  }

  // show initial 6 producs
  addToDisplay(firstShown);

<p>Display multiple products 6 at a time<br/>
  <button type="button" onclick="back();">Back</button>
  <button type="button" onclick="forward();">Forward</button>
</p>
  <ul id="display"></ul>

Make a list with multiple pages in Jquery

1 Answers1