Как создать пагинацию сложной HTML страницы с разными блоками.?
Предположим у меня есть страница, на которой есть смешанный контент ( текст, картинки, ссылки, списки, таблицы). Каждая логически цельная информация отделена звездочками Например *** Контент 1 *** Контент 2 *** Контент 3 *** и т.д. и все это на одной странице.
Как страницу с таким контентом разбить на отдельные страницы, причем так, чтобы контент заключенный в *** не делился на части, т.е. перенос на следующую страницу осущевствлялся по звездочкам. Ну вот например на странице:
1)
***
Контент 1
***
Контент 2
***
Контент 3
***
2)
***
Контент 4
***
Контент 5
***
Контент 6
***
3)
***
Контент 7
***
Контент 8
***
Контент 9
***
И т.д.
Можно так сделать?
Проще всего (и правильнее, чтобы не таскать лишний трафик) сделать пагинацию на стороне сервера
Для динамического контента используется javascript, обновление логикой скриптов веб-сервера, распилом монолита веб-компонентами или даже микросервисами.
Пример сборки на веб-компонентах (хедер, контент и футер) + микросервис (калькулятор) там: https://bulletproof-password.web.app/toggle-theme.html
Вариант paginatiion с загрузкой всего монолита в одностраничное приложение, большинство которого может быть бессмысленным — подход несколько громоздкий и устаревший. .Уж лучше сделать несколько отдельных страниц или модулей с динамической подлинковкой..
Шаг 1: HTML-структура
html
<div id="content">
***
<div class="page-content">Контент 1</div>
***
<div class="page-content">Контент 2</div>
***
<div class="page-content">Контент 3</div>
***
<div class="page-content">Контент 4</div>
***
<!-- и так далее -->
</div>
<div id="pagination"></div>
Шаг 2: CSS
css
.page-content {
margin-bottom: 20px;
border: 1px solid #ccc;
padding: 10px;
}
Шаг 3: JavaScript и jQuery
javascript
$(document).ready(function() {
var items = $(".page-content");
var itemsPerPage = 3; // Количество элементов на странице
var numPages = Math.ceil(items.length / itemsPerPage);
function showPage(page) {
items.hide().slice((page - 1) * itemsPerPage, page * itemsPerPage).show();
updatePagination(page);
}
function updatePagination(page) {
$("#pagination").empty();
for (var i = 1; i <= numPages; i++) {
$("#pagination").append($('<a href="#" class="page-number">' + i + '</a>'));
}
$(".page-number").removeClass("active").eq(page - 1).addClass("active");
}
showPage(1);
$("#pagination").on("click", ".page-number", function(e) {
e.preventDefault();
showPage($(this).text());
});
});