Форум

BarsBelka · #1 (**permalink**) 10.11.2021, 17:01

Здравствуйте, у меня такая ситуация, мне нужно сделать пагинацию, при которой кнопка "назад" исчезает если она = 1, и появляется если 2 и больше. Сделать всё на чисто JS

<div class="pagenumbers" id="pagination">
            <button id="previous-page">Назад</button>
            <div class="number-of-page"></div>
            <button id="next-page">Далее</button>
        </div>

const prevBtn = document.getElementById('previous-page')
const nextBtn = document.getElementById('next-page')
const numberOfPage = document.querySelector('.number-of-page')
let pageNumber = 1
numberOfPage.textContent = pageNumber

// Пагинация
nextBtn.addEventListener('click', () => {
    pageNumber++
    posts.innerHTML=''
    numberOfPage.textContent = pageNumber
    getPage()
})

prevBtn.addEventListener('click', () => {
    pageNumber--
    posts.innerHTML=''
    numberOfPage.textContent = pageNumber
    getPage()
})

рони · #2 (**permalink**) 10.11.2021, 17:10

BarsBelka,
в строки 12 и 19 добавить

prevBtn.hidden = pageNumber == 1;

ksa · #3 (**permalink**) 10.11.2021, 17:11

Если у тебя изначально

Сообщение от BarsBelka

let pageNumber = 1

Можешь кнопку "назад" сразу сделать не видимой (используй класс типа off)...
А после того как сделаешь переход на pageNumber > 1 - убирай ту не видимость (удаляй класс off).

BarsBelka · #4 (**permalink**) 10.11.2021, 17:13

Она исчезает только если нажать "вперед" и потом снова "назад", при перезагрузке страницы кнопка остаётся

BarsBelka · #5 (**permalink**) 10.11.2021, 17:16

У меня было так

if(pageNumber === 1){
    prevBtn.classList.add('hide')
} else {
    prevBtn.classList.remove('hide')
}

Но она не появлялась в любом случае

voraa · #6 (**permalink**) 10.11.2021, 17:34

А что делает getPage()?
Он полностью перезагружает страницу?

Если у вас полностью одностраничный сайт, меняется только контент, то вы должны сохранять состояние текущей страницы в sessionStorage, или правильнее менять текущий url и работать с history.

BarsBelka · #7 (**permalink**) 10.11.2021, 17:36

getPage получает список постов из API jsonplaceholder, выводит он их с лимитом в 10 постов, там нет ничего связанного с пагинацией

рони · #8 (**permalink**) 10.11.2021, 17:44

BarsBelka,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
</head>

<body>
    <div class="pagenumbers" id="pagination">
        <button id="previous-page">Назад</button>
        <div class="number-of-page"></div>
        <button id="next-page">Далее</button>
    </div>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            const prevBtn = document.getElementById('previous-page');
            const nextBtn = document.getElementById('next-page');
            const numberOfPage = document.querySelector('.number-of-page');
            let pageNumber = 1
            numberOfPage.textContent = pageNumber;

            function page(up = 0) {
                pageNumber += up;
                //posts.innerHTML='';
                numberOfPage.textContent = pageNumber;
                //getPage()
                prevBtn.hidden = pageNumber == 1;
            }
            page()
            // Пагинация
            nextBtn.addEventListener('click', () => page(1))
            prevBtn.addEventListener('click', () => page(-1))

        });
    </script>
</body>

</html>

BarsBelka · #9 (**permalink**) 10.11.2021, 17:55

Этот вариант работает, но у меня выводит 20 постов вместо 10 положенных, хотя при получении ссылки стоит _limit=10

BarsBelka · #10 (**permalink**) 10.11.2021, 18:12

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

const disablePrevBtn = () => {
    if (pageNumber == 1){
        prevBtn.disabled = true
    } else {
        prevBtn.disabled = false
    }
}

Может кому-то поможет

Форум

Справочник

Discord чат

Курсы javascript