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