title: Pagination for JSON results in HTML/Javascript page
body: <p>I'm creating an ONE PAGE WEB APP to display products. Thanks to a portion of javascript code, I collect the data from a json file and display it on the HTML page.</p>
  
  <p>The problem is that each time all the data in the json file is displayed. I would like to have the possibility to add pagination or an infinite scroll to navigate through the results, without all being loaded at the same time.</p>
  
  <p>I tried:
  <a href="https://infinite-scroll.com/" rel="nofollow noreferrer">https://infinite-scroll.com/</a><br>
  <a href="https://pagination.js.org/" rel="nofollow noreferrer">https://pagination.js.org/</a></p>
  
  <p>but the documentation is really too complex for me, please ask for a little help or an alternative solution for my situation.</p>
  
  <h1>This is the js to fetch data from JSON file</h1>
  
  <pre><code>$(function () {
      var Product = [];
      $.getJSON('data/people.json', function (data) {
          $.each(data.Product, function (i, f) {
  
  
  //...some stuff...
  
    var card =
  
  //  ...some stuff...
  
            $(card).appendTo("#list");
          });
      });
  });
  </code></pre>
  
  <h1>This is HTML section where result displayed</h1>
  
  <pre><code> &lt;div id="list" class="card-columns mx-4 px-4"&gt;
  
      &lt;/div&gt;
  
  </code></pre>
  
  <h1>JSON</h1>
  
  <pre><code>
  {
      "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"
          }
      ]
  }
  </code></pre>