Pagination for JSON results in HTML/Javascript page

Question

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.

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.

I tried: https://infinite-scroll.com/
https://pagination.js.org/

but the documentation is really too complex for me, please ask for a little help or an alternative solution for my situation.

This is the js to fetch data from JSON file

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


//...some stuff...

  var card =

//  ...some stuff...

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

This is HTML section where result displayed

 <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"
        }
    ]
}

jcubic · Accepted Answer · 2019-08-15 16:37:55Z

so what you need to do is something like this:

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

In your code:

$.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>');
            });
        }
    });
});

@Stew in your code you do the same you have data in variable, instead of hard coded you use that, see last code in my answer.

Collectives™ on Stack Overflow

Pagination for JSON results in HTML/Javascript page

This is the js to fetch data from JSON file

This is HTML section where result displayed

JSON

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

This is the js to fetch data from JSON file

This is HTML section where result displayed

JSON

1 Answer 1

1 Comment

Related