Можно ли только ч/з CSS сделать полнофунк-ый pagination?

Question

[Олег Остапчук]

Вот :

1. https://www.w3schools.com/css/css3_pagination.asp
2. И, напр., самый нижний пример.

[OFF]Собственно, как всегда, долго о чём-то написано, а самое главное не освещено[/OFF]: как сделать, чтобы оно становилось active, т.е. зелёное, от того, что мы перешли на новую страницу. Т.е. в этом коде оно всегда остаётся прежнее зелёным.

Comments

[Rustam Bainazarov]

Вы хотите backend-составляющую пагинации сделать на CSS. Ого.

Предлагаю сразу весь backend делать на CSS.

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

[AlexBergal]

Рустам Байназаров, если вашей квалификации не хвает, для решения задачи, то это не значит, что задачу решить нельзя

[Rustam Bainazarov]

AlexBergal, что? :))

Вы вообще в теме? Или лишь бы сказать? Какая пагинация на CSS? Вы представляете, для чего CSS?

Это задача для backend, а для frontend'a — максимум рендеринг на основе данных backend, а для CSS частности — стилизовать селекторы.

Если не знаете, то лучше читайте внимательнее задачу, почитайте о технологиях, а затем то, что написал я..

К сожалению, это говорит именно о вашем уровне квалификации, раз вы предполагаете, что данная задача — для CSS, LOL.

[AlexBergal]

Я то как раз в теме. Более того, я реализовывал пагинацию на чистом цсс

[AlexBergal]

Тоже мне, куратор

[Rustam Bainazarov]

AlexBergal, ну-ка покажите мне пагинацию на CSS. Если вы про вёрстку и стилизацию — это не пагинация.

По вашим словам CSS умеет:
1) Уметь получать количество страниц от backend (обращаться к базе данных, движку и т. п.)
2) Генерировать DOM на его основе
4) Умеет в целом манипулировать структурой DOM
4) Формировать ссылки
5) Ставить нужный класс к активной ссылке

Покажите мне такой CSS, о котором даже браузеры не знают.

Вы путаете стили и механизм работы пагинации. Тотально.

А так — да, поздравляю: вы научились стилизовать селекторы DOM, чтобы было красиво, и выдаёте это за механизм работы пагинации.

AlexBergal, кстати, почитайте ответ Dima Polos к данному вопросу. Там для таких, как вы, он весьма подробно расписал.

[AlexBergal]

Все в кучу собрал, и бэкенд и дом, и все остальное.

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

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

[Rustam Bainazarov]

AlexBergal, боюсь, вы и близко не понимаете того, о чём ведёте речь. Собрал в кучу backend и DOM? Вы просто не знаете, как собирается пагинация. А может, это новые для вас слова? Или троллите попросту :))

Покажите, пожалуйста, мне пагинацию на CSS, которая работает без backend. Мы же обсуждаем предметно, а не просто из воздуха берём. Буду рад извиниться перед вами и получить новые знания.

Если вы про примеры а-ля https://codepen.io/jsnanigans/pen/dXAYBJ — то у меня опять же для вас плохие новости.

P. S. Чтобы человек получал уведомления о комментарии, нужно указывать его никнейм через @.

[AlexBergal]

Рустам Байназаров, начал гуглить и открыл первую ссылку в гугл? Уже хорошо, прогресс. Ещё немного, глядишь, и мировоззрение изменится

[Rustam Bainazarov]

AlexBergal, я вас понял, тролль.

Я теперь тоже буду генерировать URL страниц и DOM с помощью CSS! Научился, спасибо!

Лучше научите ещё и автора вопроса данной запретной технике тоже, пожалуйста, в ответах.

[AlexBergal]

Я не тролль, но и в учителя не нанимался.
Я указал на ошибочное мышление.

Если нет желания расширять свой кругозор - можешь просто игнорировать все замечания в свой адрес

[Rustam Bainazarov]

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

Замечания о технологии, не подкрепленные фактами, — это словоблудие называется.

[Rustam Bainazarov]

AlexBergal, а знаете, я понял, что вы называете пагинацией на CSS.

Лютый хак с сокрытием части элементов, когда DOM на странице это уже сгенерирован изначально. К примеру, можно ещё сделать на radio button тогда пагинацию. Я так делал для прикола, но там больше как табы функционировало. Хотя и там очевидно, что количество страниц нужно было вручную прописать.

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

Ну коли вы такое говно любите делать, не дай бог с вами работать или работать после вас на проекте.

[AlexBergal]

Рустам Байназаров, ну если ты реализовывал гавно, это не значит что оно только так и реализуется.

Я с первого коммента об этом пытаюсь тебе донести.

Хотя очевидно, что это бестолку

[Rustam Bainazarov]

AlexBergal, это говно по своей сути. Это не пагинация и ею быть не может, потому что у такого решения никогда не будет всех её возможностей.

Путаете вы внешнее и внутреннее. То, как это выглядит и то, как это работает. Вы сделали не пагинацию, а табы.

С такими решениями получать больше 100–120 тысяч не выйдет в мелкой компании уровня СНГ, где нет контроля за тем, что вы делаете. Извините-простите, но я так не хочу, мне такое даром не надо.

[AlexBergal]

Рустам Байназаров, с таким ограниченным мировоззрение, я бы тебе и 50 не платил))))

Кнопочки раскрашивать на должности помощника джуна самое то))))

[Rustam Bainazarov]

AlexBergal, вы любитель плохих решений, которые не приняты в индустрии по понятным причинам.

Наверное, потому, что у вас очень «широкое мировоззрение». Это вас и погубит. Если бы мои сотрудники такое пускали в «продакшн» (вашего уровня решения), я бы их всех уволил.

[AlexBergal]

Рустам Байназаров, ну тут ты уже совсем обосрался.

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

[Rustam Bainazarov]

AlexBergal, никаких оценочных суждений, это факт: вы — любитель плохих решений, если для вас полнофункциональная пагинация возможна только на CSS. Нонсенс.

Авось, я научусь делать сайты только на CSS без HTML, JS, SVG и backend и т. п. Буду расширять кругозор благодаря вам, спасибо!

[AlexBergal]

Рустам Байназаров, ты опять обосрался.
Я нигде не писал, что я любитель плохих решениц

Answer 1

[Dima Polos]

Пагинация нужна, если количество данных слишком большое для одной страницы.

Данные хранит сервер и он знает и решает, сколько отдать данных. Именно сервер знает, по какому url'у лежит следующая часть данных и он же знает на какой странице сейчас пользователь, точнее он может определить.

CSS работает на клиенте, значит, он не может знать какая страница из скольки страниц и на какой сейчас пользователь. Но если есть какой-то класс у ссылки, типа current, CSS может изменить стиль для этого элемента.

Вся эта музыка работает так:
а) с точки зрения верстки: надо создать класс, тот же current, который изменить стиль ссылки текущей страницы;
б) с точки зрения бэкенда: код, который будет выводить верстку пагинации из шаблона, должен определить какую страницу запрашивает сейчас пользователь и в вывод верстки добавить еще класс current, если адреса совпадают.

ВЫВОД: только через CSS такое сделать нельзя, так как о всех страницах пагинации ведает сервер.

Comments

[AlexBergal]

Много данных для отображения или загрузки?

Браузер нормально загружает 1 тыс товаров, а отрисовывать на странице достаточно 20-40, управляя при этом отрисовкой яваскриптом или чистым css

[Dima Polos]

AlexBergal, зачем мне на телефоне 1000 товаров если я увижу только 20-40? В любом случае на чисто CSS все равно не сделать.

[Rustam Bainazarov]

Dima Polos, он мне два часа в комментариях доказывал, что это нормальная практика и что можно сделать полнофункциональную пагинацию на CSS. А в итоге стало понятно, что он сделал тупо с функциональной точки зрения CSS-табы. Ну не понимает человек, какие это привносит ограничения и какой функционал теряется. Да и вообще не понимает, что такое нормальная пагинация и что такими костылями нельзя выполнять работу.

P. S. 1000 товаров в DOM — фейспалм, какой же размер его будет, сколько узлов, господи... бедные пользователи телефонов на Snapdragon уровня 630-х и каких-нибудь ПК на Core i3 24XX.

[Dima Polos]

Рустам Байназаров, 100000%!!!!
Потом телефон горячий не пойми с чего, памяти не хватает, все тормозит и батарея садится. Не у всех телефоны мощные. Если есть сервер, что мешает сделать это нормально.

[Dima Polos]

Рустам Байназаров, оу, увидел комменты)) прикол

[Rustam Bainazarov]

Dima Polos, этому человеку нормально мешает сделать сам подход к задаче, а также слишком «широкий кругозор» и «высочайшая компетенция».

Я в таком случае лучше останусь со своей низкой технической грамотностью, чем так.

[AlexBergal]

Рустам Байназаров, ну ты же пишешь откровенный бред.
Ты в глаза не видел моих решений, но уже умудрился приписать мне авторство табов.

Очередной фейспалм

[AlexBergal]

Dima Polos, попробуй перечитать все комменты.

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

Не стоит однозначно утверждать то, что не является однозначный.

[Rustam Bainazarov]

AlexBergal, я уже понял, что вам по силу сделать на CSS даже AJAX-запрос, поэтому мне доказывать более ничего не нужно. Преклоняюсь.

Пагинация на CSS ≠ пагинации. И ею быть не может. Если у вас получился костыль на CSS — поздравляю.

Я так делал однажды сортировку фильтров на CSS с помощью :checked и flex-order. Но предоставлять это решение как решение проблемы сортировки, которую нужно делать на JS, как все нормальные люди, — это стыдно. Ваша CSS-пагинация — тот же случай.

[Dima Polos]

AlexBergal, понятно, что гибким быть надо, но все же вопрос был про пагинацию чисто на css, это что-то не то..