@okozlovskyi

Возможна ли загрузка части JSON с jQuery?

Мне нужно организовать постраничную разбивку материалов на фронтенде,
даные получаю в JSON-е, и вывожу с jQuery-tmpl.
Как сделать так, что бы при переключении на енную страницу - грузились ни все материалы, а только их часть?
количество материалов на страницу буду указывать только в скриптах.
  • Вопрос задан
  • 2403 просмотра
Пригласить эксперта
Ответы на вопрос 2
baskerville42
@baskerville42
Учусь работать (Junior)
Циклом выводить первые 10 еллементов, затем еще +10 и еще +10 по мере скрола. Гуглите на тему "подгрузка данных при скроле"
Сразу хочу Вас предостеречь не делать этого на сайте, по крайней мере на странице, которая должна индексироваться поисковиками. У гугла поисковый робот глупенький и не умеет запускать JavaScript и всё что он увидит - пустую страницу.
Ответ написан
@bromzh
Drugs-driven development
Есть несколько основных варианта организовать вывод части данных.
Вариант №1 - количество элементов на 1-й странице и номер страницы. Это самый негибкий вариант.
Вариант №2 - сдвиг и количество. Задаёшь текущий сдвиг и количество элементов.
Вариант №3 - от и до. Задаёшь, номер начального и конечного элемента.
Пример. Надо получить данные для 3-й страницы.
Для варианта №1 значения будут такие items_per_page = 25; page = 3
Для варианта №2 значения будут такие shift = 50; count = 25
Для варианта №2 значения будут такие from = 50; to = 75

Как это реализовать на практике. (Привожу примеры на питоне и для 2-го варианта)
Вариант на сервере
Я не знаю, какой у тебя язык на серваке и какие технологии ты используешь. Но обычно, если используется ORM, то он позволяет получать записи из БД в определённом промежутке, либо постранично. Тогда код будет таким:
@app.route("/api/items/")
def items():
    shift = request.get("shift")
    count = request.get("count")
    return Item.objects.all().from(shift).to(shift + count)

Ну а из клиента делай ajax-запрос на этот урл с нужными ГЕТ-параметрами, т.е. урл будет выглядеть так: /api/items/?shift=50&count=25. На нажатие кнопки с номером страницы вешай функцию, которая узнает номер страницы и сформирует соотв. запрос

Вариант - на клиенте
Сервер отдаёт сразу все элементы. На клиенте используй angular/knockout/etc. Данные сохраняются в массив моделей (модель соответствует информации для каждой item). Нажатие кнопки с номером страницы не запрашивает данные с серва, а загружает модели выбранного фреймворка в определённом промежутке.

Если ты скажешь, что используешь на сервере и какие фреймворки используешь на клиенте, я смогу написать к выходным гист с работающим примером для твоего языка.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы