На какой связке легче и быстрей сделать пагинацию верстальщику?

2 ответов

Допустим я верстальщик, у меня есть лендинг, который я сделал на gulp'е. В лендинге есть карточки, сейчас их 6, в будущем я хочу добавить ещё 18 карточек, выводить хочу по 6 карточек.

Вопрос: на какой связке легче и быстрей сделать пагинацию на лендинге, выполненным с помощью сборщика gulp (на выходе HTML, CSS, JS склеенные и минифицированные)?

Я знаю, что есть, например, Laravel, но его надо устанавливать и всю вёрстку встраивать туда и играть по правилам Laravel, более быстрый и лёгкий путь для этой цели есть? Или нужно использовать полноценный PHP Framework для этой цели? Смысл в том, что я не хочу использовать php framework для этой цели. Есть ли какие-то аналоги js плагины или фреймворки, на чём сделать базу данных и как связать её с JS, с помощью JS framework? Натолкните на мысль, пожалуйста. Меня интересует быстрый способ сделать пагинацию для лендинга.

Дополнительно:

Так сделайте, грузите все сразу, но показывайте по 6 карточек. Юзер нажал на вторую страницу - показали следующие 6...

Или не грузите все сразу, сформируйте json файл, и грузите оттуда аяксом по всем правилам "пагинации"

Вам не нужен серверный язык для этой задачи...и уж тем более ларавел...

Спасибо, понял. Попробую сделать так "сформируйте json файл, и грузите оттуда аяксом по всем правилам "пагинации".
это называется overhead
если верстальщик - достаточно показать состояния кнопок.
а если слайдов будет 1024? наверное они будут грузится с сервера порциями по 6 или 12
Froggyweb, не будет 1024, мне нужна пагинация для малого числа карточек, заранее известного.

Нужно решить такую задачу?

Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

Заказать помощь

Лучший ответ

Виктор Sys Ответ

Для верстальщика, который занимается созданием интерфейса и версткой, легче и быстрее сделать пагинацию с использованием HTML и CSS, чем с помощью PHP.

HTML и CSS позволяют создать структуру и стиль пагинации без необходимости внедрения логики программирования. Вот пример простой пагинации на HTML и CSS:

<div class="pagination">
  <a href="#" class="active">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#">5</a>
</div>

.pagination {
  display: inline-block;
}
 
.pagination a {
  color: black;
  float: left;
  padding: 8px 16px;
  text-decoration: none;
}
 
.pagination a.active {
  background-color: #4CAF50;
  color: white;
}

.pagination { display: inline-block; } .pagination a { color: black; float: left; padding: 8px 16px; text-decoration: none; } .pagination a.active { background-color: #4CAF50; color: white; }

Этот код создаст простую пагинацию с номерами страниц и активной страницей.

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

$items_per_page = 10;
$total_items = 100;
$total_pages = ceil($total_items / $items_per_page);
 
for ($i = 1; $i &lt;= $total_pages; $i++) {
  echo &quot;<a href='?page=$i'>$i</a>";
}

$items_per_page = 10; $total_items = 100; $total_pages = ceil($total_items / $items_per_page); for ($i = 1; $i <= $total_pages; $i++) { echo "<a href='?page=$i'>$i</a>"; }

Хотя использование PHP для пагинации может быть более гибким и мощным, это требует больше времени и усилий для разработки, особенно для верстальщика, который не имеет опыта в программировании.

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

Другие ответы (1) Ответить на вопрос

Артём Dev

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

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

<div class="pagination">
  <a href="#" class="prev">&laquo;</a>
  <a href="#" class="page">1</a>
  <a href="#" class="page">2</a>
  <a href="#" class="page">3</a>
  <a href="#" class="next">&raquo;</a>
</div>

Затем верстальщик может использовать CSS для стилизации пагинации и создания эффектов при наведении курсора на элементы. Например:

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
 
.page, .prev, .next {
  padding: 5px 10px;
  margin: 0 5px;
  text-decoration: none;
  color: #333;
}
 
.page:hover, .prev:hover, .next:hover {
  background-color: #f0f0f0;
}

.pagination { display: flex; justify-content: center; align-items: center; } .page, .prev, .next { padding: 5px 10px; margin: 0 5px; text-decoration: none; color: #333; } .page:hover, .prev:hover, .next:hover { background-color: #f0f0f0; }

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

document.querySelector('.prev').addEventListener('click', function() {
  // Логика для перехода на предыдущую страницу
});
 
document.querySelector('.next').addEventListener('click', function() {
  // Логика для перехода на следующую страницу
});
 
document.querySelectorAll('.page').forEach(function(page) {
  page.addEventListener('click', function() {
    // Логика для перехода на выбранную страницу
  });
});

Таким образом, используя HTML, CSS и JavaScript, верстальщик может легко и быстро создать пагинацию на своем сайте без необходимости обращаться к бэкенду.

комментарий Отменить ответ

Вам также может быть интересно

VPN Как правильно настроить vless для Android TV? 1 ответ Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 1 ответ печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 1 ответ Аккумуляторные батареи Почему при зарядке автостарта слышен писк, где искать причину? 1 ответ

На какой связке легче и быстрей сделать пагинацию верстальщику?

Дополнительно:

комментарий Отменить ответ

Вам также может быть интересно

Ежедневно, круглосуточно