Составьте список из нескольких страниц в Jquery - PullRequest
0 голосов
/ 07 мая 2020

Я делаю страницу со списком продуктов (которые загружаются с использованием ajax), но я хочу отображать только 6 продуктов на странице, но я не знаю, как это сделать, и не нахожу ни одного примеры, реализующие то, что я хочу. Так, например, если у меня есть 20 продуктов, я хочу показать 6 на первой странице, 6 на второй, .. и т.д. c до последнего продукта на последней странице (страница всегда одинакова, только продукты меняются). Итак, в конце страницы у меня должна быть страница 1-n. Кто-нибудь может мне помочь? это js, который загружает продукты и показывает их один под другим:

$(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");
    });
  }
}

1 Ответ

0 голосов
/ 07 мая 2020

Если страница не меняется, вы можете оставаться на той же странице, просто меняя показанные продукты.

Вот упрощенная версия, демонстрирующая, как это может работать:

// 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...