Is it possible to load part of JSON with jQuery?

Question

JavaScript

I need to organize pagination of materials on the frontend,
I get data in JSON and output it with jQuery-tmpl.
How can I make it so that when switching to this page, not all materials are loaded, but only part of them?
I will indicate the number of materials per page only in scripts.

Answer 1

Display the first 10 elements in a loop, then +10 more and +10 more as you scroll. Google on the topic "loading data when scrolling"
I want to warn you right away not to do this on the site, at least on the page that should be indexed by search engines. Google's search robot is stupid and can't run JavaScript, and all it sees is a blank page.

Answer 2

There are several basic options for organizing the output of a piece of data.
Option number 1 - the number of elements on the 1st page and the page number. This is the most inflexible option.
Option number 2 - shift and quantity. You set the current shift and the number of elements.
Option number 3 - from and to. You set the number of the start and end element.
Example . It is necessary to receive the data for the 3rd page.
For option #1, the values ​​will be items_per_page = 25; page = 3
For option No. 2, the values ​​will be shift = 50; count = 25
For option No. 2, the values ​​will be from = 50; to = 75
How to put it into practice. (I give examples in python and for the 2nd option)
Option on the server
I don't know what language you have on the server and what technologies you use. But usually, if ORM is used, then it allows you to get records from the database in a certain interval, or page by page. Then the code will be like this:

@app.route("/api/items/")
def items():
    shift = request.get("shift")
    count = request.get("count")
    return Item.objects.all().from(shift).to(shift + count)

Well, from the client, make an ajax request to this URL with the necessary GET parameters, i.e. the url will look like this: /api/items/?shift=50&count=25 . On pressing a button with a page number, hang up a function that recognizes the page number and generates the corresponding. request
Variant - on the client
The server returns all elements at once. On the client, use angular/knockout/etc. The data is stored in an array of models (the model corresponds to the information for each item). Pressing the button with the page number does not request data from the server, but loads the models of the selected framework in a certain interval.
If you tell me what you use on the server and what frameworks you use on the client, I can write a gist with a working example for your language by the weekend.