JSON分页结果显示在HTML/Javascript页面中 [英] Pagination for JSON results in HTML/Javascript page

问题描述

我正在创建一个单页Web应用程序以显示产品.多亏了一部分JavaScript代码，我从json文件中收集了数据并将其显示在HTML页面上.

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.

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

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.

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

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.

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

推荐答案

所以您需要做的是这样的事情:

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

在您的代码中:

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

这篇关于JSON分页结果显示在HTML/Javascript页面中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！