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

Question

Олег Остапчук @number_118

CSS

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

Вот :

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

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

Вопрос задан более трёх лет назад
883 просмотра

20 комментариев

Подписаться 1 Простой 20 комментариев

Rustam Bainazarov @SmthTo Куратор тега CSS

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

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

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

Написано более трёх лет назад
AlexBergal @AlexBergal

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

AlexBergal, что? :))

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

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

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

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

Написано более трёх лет назад
AlexBergal @AlexBergal

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

Написано более трёх лет назад
AlexBergal @AlexBergal

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

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

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

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

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

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

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

Написано более трёх лет назад
AlexBergal @AlexBergal

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

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

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

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

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

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

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

Написано более трёх лет назад
AlexBergal @AlexBergal

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

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

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

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

Написано более трёх лет назад
AlexBergal @AlexBergal

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

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

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

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

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

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

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

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

Написано более трёх лет назад
AlexBergal @AlexBergal

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

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

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

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

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

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

Написано более трёх лет назад
AlexBergal @AlexBergal

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

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

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

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

Написано более трёх лет назад
AlexBergal @AlexBergal

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

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

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

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

Написано более трёх лет назад
AlexBergal @AlexBergal

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

Написано более трёх лет назад

Решения вопроса 1

10 комментариев

AlexBergal @AlexBergal

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

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

Написано более трёх лет назад
Dima Polos @dimovich85 Куратор тега CSS

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

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

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

Написано более трёх лет назад
Dima Polos @dimovich85 Куратор тега CSS

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

Написано более трёх лет назад
Dima Polos @dimovich85 Куратор тега CSS

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

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

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

Написано более трёх лет назад
AlexBergal @AlexBergal

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

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

Написано более трёх лет назад
AlexBergal @AlexBergal

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

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

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

Написано более трёх лет назад
Rustam Bainazarov @SmthTo Куратор тега CSS

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

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

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

Написано более трёх лет назад
Dima Polos @dimovich85 Куратор тега CSS

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

Написано более трёх лет назад

Пригласить эксперта

Ваш ответ на вопрос

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

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Простой
Вся секция заежает за header?
- 1 подписчик
- час назад
- 12 просмотров
0

ответов
CSS

Простой
Как в данном коде формируется высота блока?
- 1 подписчик
- 6 часов назад
- 27 просмотров
1

ответ
CSS

Простой
Как убрать подчеркивание ссылки :hover?
- 1 подписчик
- 7 часов назад
- 42 просмотра
0

ответов
HTML

+1 ещё

Простой
Как добавить разный фон в ::before для объектов с одинаковым стилем?
- 1 подписчик
- 7 часов назад
- 15 просмотров
0

ответов
JavaScript

+2 ещё

Средний
Возможно ли расположить или чтобы блок div мог заходить в прозрачный фон png фота?
- 1 подписчик
- 8 часов назад
- 23 просмотра
1

ответ
CSS

Простой
Как сделать фон который слева сужается, справа расширяется?
- 1 подписчик
- 10 часов назад
- 51 просмотр
1

ответ
CSS

+1 ещё

Простой
Bootstrap, как затемнить картинку?
- 1 подписчик
- 15 часов назад
- 50 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Смена стилей шапки сайта при скролле к определенному блоку? Стили должны применяться при скролле до блока и отменяться за его пределами?
- 1 подписчик
- вчера
- 65 просмотров
1

ответ
CSS

Простой
Почему line-clamp для обрезания строк отображает текст ниже троеточия?
- 1 подписчик
- 24 апр.
- 61 просмотр
1

ответ
HTML

+1 ещё

Простой
Можно ли изменить цвет шрифта снаружи для тега у которого цвет прописан внутри?
- 1 подписчик
- 24 апр.
- 69 просмотров
2

ответа
Показать ещё Загружается…

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

React разработчик

Uptrade

от 150 000 до 200 000 ₽

Необходимо сверстать приложение согласно макету Figma используя React

26 апр. 2024, в 22:22

1500 руб./за проект

Написать модуль подключения матрицы Sony к ПЛИС (Verilog)

26 апр. 2024, в 21:30

15000 руб./за проект

8266 f12 требуется сделать ревью и оптимизировать работу

26 апр. 2024, в 20:42

2000 руб./за проект

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Answer 1 · 2019-07-28 11:35:58

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

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

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

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

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

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

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

Минуточку внимания

Войдите на сайт