JSON 的分页导致 HTML/Javascript 页面

Question

我正在创建一个 ONE PAGE WEB APP 来展示产品。多亏了一部分 javascript 代码，我从一个 json 文件中收集数据并将其显示在 HTML 页面上。

问题是每次显示json文件中的所有数据。我希望可以添加分页或无限滚动来浏览结果，而不是同时加载所有结果。

我试过了： https://infinite-scroll.com/
https://pagination.js.org/

但是文档对我来说真的太复杂了，请寻求一些帮助或针对我的情况的替代解决方案。

这是从 JSON 文件中获取数据的 js

$(function () {
    var Product = [];
    $.getJSON('data/people.json', function (data) {
        $.each(data.Product, function (i, f) {


//...some stuff...

  var card =

//  ...some stuff...

          $(card).appendTo("#list");
        });
    });
});

这是显示结果的 HTML 部分

 <div id="list" class="card-columns mx-4 px-4">

    </div>

JSON

{
    "Product": [
        {
            "Key1": "Value1",
            "Key2": "Value2",
            "Key3": "Value3",
            "Key4": "Value4",
            "Key5": "Value5"
        },
        {
            "Key1": "Value1",
            "Key2": "Value2",
            "Key3": "Value3",
            "Key4": "Value4",
            "Key5": "Value5"
        },
        {
            "Key1": "Value1",
            "Key2": "Value2",
            "Key3": "Value3",
            "Key4": "Value4",
            "Key5": "Value5"
        }
    ]
}

Answer 1

所以你需要做的是这样的：

var json = {
    "Product": [
        {
            "Key1": "Value1 A"
        },
        {
            "Key1": "Value1 B"
        },
        {
            "Key1": "Value1 C"
        },
        {
            "Key1": "Value1 D"
        },
        {
            "Key1": "Value1 E"
        },
        {
            "Key1": "Value1 F"
        },
        {
            "Key1": "Value1 G"
        },
        {
            "Key1": "Value1 H"
        },
        {
            "Key1": "Value1 I"
        }
    ]
}

$('#list').pagination({ // you call the plugin
  dataSource: json.Product, // pass all the data
  pageSize: 2, // put how many items per page you want
  callback: function(data, pagination) {
      // data will be chunk of your data (json.Product) per page
      // that you need to display
      var wrapper = $('#list .wrapper').empty();
      $.each(data, function (i, f) {
         $('#list .wrapper').append('<ul><li>Key1: ' + f.Key1 + '</li></ul>');
      });
    }
   });

<div id="list"><div class="wrapper"></div></div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://pagination.js.org/dist/2.1.4/pagination.min.js"></script>
<link rel="stylesheet" href="https://pagination.js.org/dist/2.1.4/pagination.css"/>

在您的代码中：

$.getJSON('data/people.json', function (json) {
    $('#list').pagination({
        dataSource: json.Product,
        pageSize: 2,
        callback: function(data, pagination) {
            var wrapper = $('#list .wrapper').empty();
            $.each(data, function (i, f) {
                $('#list .wrapper').append('<ul><li>Key1: ' + f.Key1 + '</li></ul>');
            });
        }
    });
});