在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&nbsp; let products = [];&nbsp; for (let i=1; i<=20; i++) {&nbsp; &nbsp; products.push(`This is Product Name ${i}`);&nbsp; }&nbsp; let firstShown = 0;&nbsp; const display = document.getElementById('display');&nbsp; // display up to 6 products on page&nbsp; function addToDisplay(first) {&nbsp; &nbsp; display.innerHTML = '';&nbsp; &nbsp; let last = Math.min(first+5, products.length-1);&nbsp; &nbsp; for (let i = first; i <= last; i++) {&nbsp; &nbsp; &nbsp; let li = document.createElement('li');&nbsp; &nbsp; &nbsp; li.innerHTML = products[i];&nbsp; &nbsp; &nbsp; display.appendChild(li);&nbsp; &nbsp; }&nbsp; }&nbsp; function forward () {&nbsp; &nbsp; display.innerHTML = '';&nbsp; &nbsp; firstShown += 5;&nbsp; &nbsp; addToDisplay(firstShown);&nbsp; }&nbsp; function back () {&nbsp; &nbsp; display.innerHTML = '';&nbsp; &nbsp; firstShown = Math.max(firstShown-5, 0);&nbsp; &nbsp; addToDisplay(firstShown);&nbsp; }&nbsp; // show initial 6 producs&nbsp; addToDisplay(firstShown);<p>Display multiple products 6 at a time<br/>&nbsp; <button type="button" onclick="back();">Back</button>&nbsp; <button type="button" onclick="forward();">Forward</button></p>&nbsp; <ul id="display"></ul>