Здравствуйте! Помогите пожалуйста разобраться.
Делаю для сайта
пагинацию. У меня по умолчанию на всех страницах отображается по три фотки. Мне нужно, чтобы
при нажатии на верхние кнопки-
количество фоток менялось на странице мгновенно(кнопка "2-count"-показывает по две фотки на странице, кнопка "3-count"-показывает по три фотки).
У меня меняется количество фоток при нажатии кнопок "2-count" или "3-count", но только при дальнейшем переходе на следующую страницу
(при нажатии на нижние кнопки).
П.С. сначала я нажимаю на любую нижнюю кнопку(отвечающую за номер страницы) => отображаются фотки на странице. кнопки вверху отвечают за количество фоток, отображаемых на выбранной странице.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
#table td {
padding: 10px;
border: 1px solid black;
}
#pagination {
display: flex;
padding: 0;
list-style-type: none;
}
#pagination li {
margin-right: 5px;
padding: 10px;
border: 1px solid black;
}
#pagination li:hover,
#pagination li.active {
cursor: pointer;
color: red;
border: 1px solid red;
}
.flex-wrap {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
}
#table {
width: 90%;
height: 100%;
display: flex;
justify-content: center;
}
.testi {
width: 33.33333%;
height: 100px;
margin: 10px;
border: 1px solid blue;
}
// test content
.main-content {
width: 100%;
height: 100%;
border: 1px solid blue;
display: flex;
justify-content: center;
}
.test-table {
width: 90%;
height: 250px;
border: 1px solid red;
display: flex;
}
.test-img {
width: 33.333333%;
height: 100%;
border: 1px solid green;
background-image: url("https://picsum.photos/200/300?random=2");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
padding: 20px;
}
// ===
.picture_1 {
background-image: url("https://picsum.photos/200/300?random=1");
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.picture_2 {
background-image: url("https://picsum.photos/200/300?random=2");
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.picture_3 {
background-image: url("https://picsum.photos/200/300?random=3");
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.picture_4 {
background-image: url("https://picsum.photos/200/300?random=4");
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.picture_5 {
background-image: url("https://picsum.photos/200/300?random=5");
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.picture_6 {
background-image: url("https://picsum.photos/200/300?random=6");
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<main class="page-main">
<div class="button-container">
<button class="twobtn">2-count</button>
<button class="threebtn">3-count</button>
</div>
<div class="flex-wrap">
<div id="table">
</div>
</div>
<ul id="pagination">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</main>
<script>
let users = [
{name: 'picture_1'},
{name: 'picture_2'},
{name: 'picture_3'},
{name: 'picture_4'},
{name: 'picture_5'},
{name: 'picture_6'},
];
let table = document.querySelector('#table');
let items = document.querySelectorAll('#pagination li');
let notesOnPage = 3;
for (let item of items) {
item.addEventListener('click', function () {
let pageNum = +this.innerHTML;
let start = (pageNum - 1) * notesOnPage;
let end = start + notesOnPage;
let notes = users.slice(start, end);
table.innerHTML = '';
for (let note of notes) {
let tr = document.createElement('div');
tr.classList.add('testi');
table.appendChild(tr);
let td;
td = document.createElement('div');
td.classList.add(note.name);
tr.appendChild(td);
}
})
}
// test button pagination
const togglet = document.querySelector(".twobtn")
const togglett = document.querySelector(".threebtn")
togglet.addEventListener("click", function(){
notesOnPage = 2;
});
togglett.addEventListener("click", function(){
notesOnPage = 3;
});
</script>
</body>
</html>