在 Jquery 中创建一个包含多个页面的列表

Question

我正在制作一个包含产品列表的页面（使用 ajax 加载），但我只想显示 6 个产品/页面，但我不知道该怎么做，也找不到任何示例实现我想要的。因此，例如，如果我有 20 个产品，我想在第一页显示 6 个，在第二页显示 6 个，.. 等到最后一页的最后一个产品（页面始终相同，只有产品更改）。 所以在页面的末尾我必须有页面 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");
    });
  }
}

Answer 1

如果页面没有变化，您可以保持在同一页面上，同时只需更改显示的产品。

这里有一个简化版本来演示它是如何工作的：

// 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>