The OpenNET Project / Index page

[ новости /+++ | форум | wiki | теги | ]



"Разумная пагинация"
Вариант для распечатки  
Пред. тема | След. тема 
Форум WEB технологии (PHP)
Изначальное сообщение [ Отслеживать ]

"Разумная пагинация"  +/
Сообщение от CHIMemail (ok), 28-Окт-22, 10:35 
Доброго времени суток уважаемые форумчане!

Вопрос мой заключается вот в чём. Я довольно давно занимаюсь простенькой разработкой WEB приложений и сайтов на php и всегда пытаюсь что-либо делать по другому и усовершенствовать свой код, сделать его более правильным и функциональным. Сейчас делая очередной проект меня посетила идея об изменении принципа пагинации. Как обычно происходила пагинация в моих проектах?
1. Был обычный запрос в базу данных с количеством записей,  делился на количество записей на странице и формировалось общее количество ссылок на страницы
2. Ссылки с переходом по GET на другие страницы передавали номер страницы для дальнейшего запроса в базу и среза offset, после чего выдавал новый срез данных и формировались страницы.

Всё просто до безобразия.
Но тут мне понадобилось сделать различные фильтры и поиск по всем(или определённым) полям, необходимой информации и динамически выводить это всё в таблицу. С этим проблем не возникло:
1. JS отслеживал ввод в поле поиска, селекты и выбор дат. Проверял все эти параметры в совокупности и отправлял через AJAX к PHP файлу
2. В PHP фале формировалось два запроса, первый был со всеми фильтрами и критериями поиска на количество записей, а второй с теми же критериями поиска, но с offset.

Данные в таблице успешно заполнялись, ссылки формировались, но при поиске или фильтрации я заполнял таблицу через innerHTML и вариантов добавить пагинацию не было, так как заполнялся один только id, а пагинация была в другом id. Соответственно пагинация не обновлялась. Было решено заносить данные для пагинации в сессии, но они срабатывали только после перехода или при перезагрузке страницы. В общем всё это выглядело  довольно-таки коряво. Я задумался, ведь я видел, как на многих сайтах страницы меняют содержимое при пагинации без перезагрузки. Начал копать в этом направлении и понял что в большинстве случаев, осуществляется полная загрузка данных в память, а далее просто js нарезается по странично. Если честно я сомневаюсь в разумности данного подхода, ведь если взять те же смартфоны и скажем таблицу из 1 миллиона строк, то загрузив это всё разом, всё будет ужасно тормозить. Всё-таки это огромный объём данных, который пусть сразу и не выводится на страницу, но хранится в памяти в виде массива данных.
Начал искать другие способы и наткнулся что сейчас многое делается на node.js + vue.js или react.js. Начал смотреть более подробно что за зверь такой этот node.js и везде русским по белому написано что это фактически замена любому серверному языку вроде php, python, perl, ruby и прочим. Тогда у меня появляется разумный(как мне кажется) вопрос, неужели нельзя создать динамическую пагинацию страниц без перезагрузки страницы на php+js без использования node.js? Или задумываясь об отзывчивых динамических интерфейсах уже нет речи о php и теперь нужно переучиваться на node.js?

Ответить | Правка | Cообщить модератору

Оглавление

Сообщения [Сортировка по времени | RSS]


1. "Разумная пагинация"  +/
Сообщение от Аноним (1), 28-Окт-22, 12:38 
Возьмите фреймворк, где уже реализована пагинация, и не мучайтесь. Ларавел вам отлично подойдет.
Ответить | Правка | Наверх | Cообщить модератору

2. "Разумная пагинация"  +/
Сообщение от CHIMemail (ok), 28-Окт-22, 13:59 
> Возьмите фреймворк, где уже реализована пагинация, и не мучайтесь. Ларавел вам отлично
> подойдет.

Весь функционал у меня уже реализован, неужели мне ради пагинации придётся весь проект переписывать на Ларавел?

Ответить | Правка | Наверх | Cообщить модератору

10. "Разумная пагинация"  –1 +/
Сообщение от Филимон Мудрый (?), 03-Ноя-22, 12:10 
> Весь функционал у меня уже реализован, неужели мне ради пагинации придётся весь
> проект переписывать на Ларавел?

Да

Ответить | Правка | Наверх | Cообщить модератору

3. "Разумная пагинация"  +/
Сообщение от abi (?), 28-Окт-22, 16:13 
Сейчас стараются отделять бэкэнд от фронтэнда. Бэкэнд пишут на чём угодно, например на php и делают там REST или GRAPHQL контроллеры.

Фронт пишут на vue.js или на чём хотят, но на сервере никакого node.js нет. Он есть на машине разработчика для упаковки написанного кода. Когда я потыкал такой фреймворк ради интереса (quasar) я вообще не увидел там особого программирования на js.

А принцип отдельного запроса для получения числа строк вообще не живёт на нагрузке/большом числе записей. Точное число строк так же мало кому нужно, не говоря уже о том, что пока навигируют туда-сюда, список может поменяться.

На мой взгляд, правильно запрашивать в базе данные с окном + 1 и если вернулось число записей > окна, рисовать ссылку на следующую страницу + разместить на контроле навигации возможность запросить точное число строк, если у кого-то будет такое желание.

Ответить | Правка | Наверх | Cообщить модератору

4. "Разумная пагинация"  +/
Сообщение от CHIMemail (ok), 31-Окт-22, 10:22 
>[оверквотинг удален]
> Когда я потыкал такой фреймворк ради интереса (quasar) я вообще не
> увидел там особого программирования на js.
> А принцип отдельного запроса для получения числа строк вообще не живёт на
> нагрузке/большом числе записей. Точное число строк так же мало кому нужно,
> не говоря уже о том, что пока навигируют туда-сюда, список может
> поменяться.
> На мой взгляд, правильно запрашивать в базе данные с окном + 1
> и если вернулось число записей > окна, рисовать ссылку на следующую
> страницу + разместить на контроле навигации возможность запросить точное число строк,
> если у кого-то будет такое желание.

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

Ответить | Правка | Наверх | Cообщить модератору

5. "Разумная пагинация"  +/
Сообщение от abi (?), 31-Окт-22, 11:40 
> Вообще конечно интересная тема, как правильно загружать данные и по сколько. С
> одной стороны долбить сервер при перелистывании каждой страницы тоже накладно, например
> если это будет сотни запросов, а с другой стороны слишком много
> хранить инфы в памяти по запросу тоже не вариант. Получается должна
> быть какая то буферизация запроса. Как это делают великие гуру?

Ну, мне как бэкэнщику лучше всего, когда пагинация происходит на фронтэнде - сервер один раз шлёпнет, а компоненты в браузере всё остальное сделают. Так сказать, "читателя не интересует писательский пот". Проблема в том, что если сервер шлёпнул много, компонент обрабатывать это будет долго. Ну и память у пользователя скушали.

В этом случае фронты приходят ко мне и говорят, мол дай кусок, размер мы пришлём, укажи сколько строк получилось, какой номер страницы текущий, скажи сколько всего. Против этого я ничего не имею, кроме последнего. Сказать сколько всего я могу или приблизительно (из статистики планировщика БД) или затратно - удвоив нагрузку на БД (запрос посчёта количества занимает столько же времени, сколько и запрос строк, минус накладные расходы на отсылку результата, так как в первом случае это число). Я ему говорю, что могу дать только признак, что есть следующая страница + по отдельному запросу дам точное число строк, чёрт с тобой.

В результате при навигации пользователь видит не 1.... 100500, а "туда сюда ..." или как там фронт это обыграет. Нажав на ... пользователь увидит точное число страниц, если дождётся, а если ему просто потыкать, то он нажмёт на следующую/предыдущую, не скушав ни ресурсы сервера, ни ресурсы своего компа.

Ответить | Правка | Наверх | Cообщить модератору

6. "Разумная пагинация"  +/
Сообщение от CHIMemail (ok), 02-Ноя-22, 16:12 
>[оверквотинг удален]
> или затратно - удвоив нагрузку на БД (запрос посчёта количества занимает
> столько же времени, сколько и запрос строк, минус накладные расходы на
> отсылку результата, так как в первом случае это число). Я ему
> говорю, что могу дать только признак, что есть следующая страница +
> по отдельному запросу дам точное число строк, чёрт с тобой.
> В результате при навигации пользователь видит не 1.... 100500, а "туда сюда
> ..." или как там фронт это обыграет. Нажав на ... пользователь
> увидит точное число страниц, если дождётся, а если ему просто потыкать,
> то он нажмёт на следующую/предыдущую, не скушав ни ресурсы сервера, ни
> ресурсы своего компа.

А стрелки типа "|<" и ">|" Вы никогда не применяете для перехода на первую и последнюю страницу?

Ответить | Правка | Наверх | Cообщить модератору

11. "Разумная пагинация"  +/
Сообщение от abi (?), 03-Ноя-22, 12:36 
> А стрелки типа "|<" и ">|" Вы никогда не применяете для перехода
> на первую и последнюю страницу?

Честно говоря, не знаю. Фронты так ловко написали фронт, что он на FF не открывается, а мне что-то другое ставить лень. Мы с ними через курлы общаемся.

Подозреваю, что данных реализовать такое им хватает. (Переход на первую страницу очевиден, а последнюю они могут расчитать послав запрос на количество страниц). Это нормально - эти контролы ленивые, пока пользователь не нажмёт, запросов не будет.

Для меня главное, чтобы компонент был нарисован  посылкой только одного запроса. Иначе ко мне девопсы придут с метриками.


Ответить | Правка | Наверх | Cообщить модератору

7. "Разумная пагинация"  +/
Сообщение от анонимомус (?), 02-Ноя-22, 17:31 
Просто используйте для ответа json, для начала можно просто отдавать 2 куска html(если я правильно понял ваш поток сознания).

> Я довольно давно занимаюсь простенькой разработкой WEB приложений и сайтов на php

Чисто из интереса, давно - это сколько?

Ответить | Правка | Наверх | Cообщить модератору

8. "Разумная пагинация"  –1 +/
Сообщение от Дед Анон (?), 02-Ноя-22, 18:44 
> Просто используйте для ответа json, для начала можно просто отдавать 2 куска
> html(если я правильно понял ваш поток сознания).
>> Я довольно давно занимаюсь простенькой разработкой WEB приложений и сайтов на php
> Чисто из интереса, давно - это сколько?

около 10 лет

Ответить | Правка | Наверх | Cообщить модератору

16. "Разумная пагинация"  +/
Сообщение от Doctorrremail (ok), 06-Дек-22, 13:19 
>>> Я довольно давно занимаюсь простенькой разработкой WEB приложений и сайтов на php
> около 10 лет
>>> Тогда у меня появляется разумный(как мне кажется) вопрос, неужели нельзя создать динамическую пагинацию страниц без перезагрузки страницы на php+js без использования node.js? Или задумываясь об отзывчивых динамических интерфейсах уже нет речи о php и теперь нужно переучиваться на node.js?

Как-то у вас в голове всё перемешалось, node.js тут ни при чём. Ни при чём и Laravel.

> загрузив это всё разом, всё будет ужасно тормозить

Да, не нужно грузить миллиарды строк в браузер, любым языком, иначе гарантированно будет тормозить.

Ответить | Правка | Наверх | Cообщить модератору

9. "Разумная пагинация"  +/
Сообщение от Дед Анон (?), 03-Ноя-22, 00:15 
> Просто используйте для ответа json, для начала можно просто отдавать 2 куска
> html(если я правильно понял ваш поток сознания).
>> Я довольно давно занимаюсь простенькой разработкой WEB приложений и сайтов на php
> Чисто из интереса, давно - это сколько?

На счёт 2х кусков кода. Допустим php файл генерирует кусок таблицы, т.е. её внутреннюю часть между тегами tbody, её я и передаю через ajax в tbody id="t-data", а после этого в файле закрываются все теги и идёт div с пагинацией, в который нужно передать данные о том сколько строк данных в результате было получено сервером всего, чтоб разбить на страницы и создать структуру пагинации. Вот тут как раз и косяк, как получить через ajax 2 куска кода для разных id? Понятно что можно конечно делать как предложили выше, когда страниц очень много, то можно не подсчитывать общее количество, но тогда остаётся вопрос, что делать если по поисковому запросу найдено только несколько страниц подходящих по критериям? Получается всё равно нужно делать count запроса.

P.S. С PHP работаю около 10 лет

Ответить | Правка | К родителю #7 | Наверх | Cообщить модератору

12. "Разумная пагинация"  +/
Сообщение от wwwebcemail (ok), 03-Дек-22, 17:07 
Не вижу проблемы, нужен только небольшой рефакторинг.
По-хорошему, ajax должен запрашивать только данные, а не готовый html.
Ответ в результате ajax-запроса будет выглядеть примерно так:

{
    num_pages: 5,    // подсчитанное кол-во страниц, с учетом фильтров и т.п.
    page_limit: 50,  // кол-во записей на страницу
    data: [          // данные для текущей страницы
        { id: 123, text: "абырвалг..."},
        { id: 456, text: "абырвалг..."},
        { id: 789, text: "абырвалг..."}
    ]
}

сам запрос будет что-то типа такого:

$.ajax({
    url: "/data.php",
    method: "post",
    dataType: "json", // важно указать, что данные возвращаются в формате json. как вариант, можно прописать нужный header в ответе от PHP
    data: {
        param1: "фильтр 1",
        param2: "фильтр 2"
    },
    success: function(response) {
        // console.log(response); // для отладки
        if (response.data) {
            // тут код для заполнения и отображения таблицы
        }
        if (response.num_pages > 1) {
            // тут код для отрисовки пагинатора
            // для этого достаточно знать, сколько всего страниц будет и сколько записей на каждую страницу
        }
        // если страница одна, то можно не выводить пагинатор
    }
});

Далее, с помощью js на стороне клиента можно сформировать и таблицу, и пагинатор (см. комменты в коде выше).

Для пагинации можно взять любой готовый плагин jQuery, например, нашел вот такой простой плагин:
https://www.jqueryscript.net/other/simple-versatile-paginati...

Ответить | Правка | Наверх | Cообщить модератору

13. "Разумная пагинация"  +/
Сообщение от wwwebcemail (ok), 03-Дек-22, 17:11 
ну, или как вариант, можно на стороне сервера генерить весь html-код и отдавать ajax-ом.

{
    paginator: "html-код пагинатора",
    data: "html-код таблицы"
}

Ответить | Правка | Наверх | Cообщить модератору

15. "Разумная пагинация"  +/
Сообщение от Olegemail (??), 04-Дек-22, 20:26 
Привет, если интересно, посмотри код coffee cms там как раз идеология минимализма хорошо реализована.
Ответить | Правка | Наверх | Cообщить модератору

17. "Разумная пагинация"  +/
Сообщение от dcc0 (ok), 14-Дек-22, 12:15 
Доброго!
Всю тему не читал.
Самая простая пагинация делается с помощью инкремента и декремента переменной, которая передаётся методом POST или GET в качестве номера страницы для текстового файла или ID, если вывод из БД.
Данный подход крайне прост, реализуется в PHP, но в то же время - это, скорее всего, самый надёжный подход.

В Html5 фактитически уже есть тег для пагинации:
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_i...

Ответить | Правка | Наверх | Cообщить модератору

Архив | Удалить

Рекомендовать для помещения в FAQ | Индекс форумов | Темы | Пред. тема | След. тема




Спонсоры:
PostgresPro
Inferno Solutions
Hosting by Hoster.ru
Хостинг:

Закладки на сайте
Проследить за страницей
Created 1996-2022 by Maxim Chirkov
Добавить, Поддержать, Вебмастеру