Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 10.11.2021, 17:01
Новичок на форуме
Отправить личное сообщение для BarsBelka Посмотреть профиль Найти все сообщения от BarsBelka
 
Регистрация: 29.10.2021
Сообщений: 9

Спрятать кнопку если страница = 1
Здравствуйте, у меня такая ситуация, мне нужно сделать пагинацию, при которой кнопка "назад" исчезает если она = 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
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

BarsBelka,
в строки 12 и 19 добавить
prevBtn.hidden = pageNumber == 1;
Ответить с цитированием
  #3 (permalink)  
Старый 10.11.2021, 17:11
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,205

Если у тебя изначально
Сообщение от BarsBelka
let pageNumber = 1
Можешь кнопку "назад" сразу сделать не видимой (используй класс типа off)...
А после того как сделаешь переход на pageNumber > 1 - убирай ту не видимость (удаляй класс off).
Ответить с цитированием
  #4 (permalink)  
Старый 10.11.2021, 17:13
Новичок на форуме
Отправить личное сообщение для BarsBelka Посмотреть профиль Найти все сообщения от BarsBelka
 
Регистрация: 29.10.2021
Сообщений: 9

Она исчезает только если нажать "вперед" и потом снова "назад", при перезагрузке страницы кнопка остаётся
Ответить с цитированием
  #5 (permalink)  
Старый 10.11.2021, 17:16
Новичок на форуме
Отправить личное сообщение для BarsBelka Посмотреть профиль Найти все сообщения от BarsBelka
 
Регистрация: 29.10.2021
Сообщений: 9

У меня было так
if(pageNumber === 1){
    prevBtn.classList.add('hide')
} else {
    prevBtn.classList.remove('hide')
}


Но она не появлялась в любом случае
Ответить с цитированием
  #6 (permalink)  
Старый 10.11.2021, 17:34
Аватар для voraa
Профессор
Отправить личное сообщение для voraa Посмотреть профиль Найти все сообщения от voraa
 
Регистрация: 03.02.2020
Сообщений: 2,742

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

Если у вас полностью одностраничный сайт, меняется только контент, то вы должны сохранять состояние текущей страницы в sessionStorage, или правильнее менять текущий url и работать с history.
Ответить с цитированием
  #7 (permalink)  
Старый 10.11.2021, 17:36
Новичок на форуме
Отправить личное сообщение для BarsBelka Посмотреть профиль Найти все сообщения от BarsBelka
 
Регистрация: 29.10.2021
Сообщений: 9

getPage получает список постов из API jsonplaceholder, выводит он их с лимитом в 10 постов, там нет ничего связанного с пагинацией
Ответить с цитированием
  #8 (permalink)  
Старый 10.11.2021, 17:44
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,103

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>
Ответить с цитированием
  #9 (permalink)  
Старый 10.11.2021, 17:55
Новичок на форуме
Отправить личное сообщение для BarsBelka Посмотреть профиль Найти все сообщения от BarsBelka
 
Регистрация: 29.10.2021
Сообщений: 9

Этот вариант работает, но у меня выводит 20 постов вместо 10 положенных, хотя при получении ссылки стоит _limit=10
Ответить с цитированием
  #10 (permalink)  
Старый 10.11.2021, 18:12
Новичок на форуме
Отправить личное сообщение для BarsBelka Посмотреть профиль Найти все сообщения от BarsBelka
 
Регистрация: 29.10.2021
Сообщений: 9

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

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


Может кому-то поможет
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Если чебокс активен, то функцию выполнять. Если не активен, не выполнять. Doc_Emmett Brown Opera, Safari и др. 2 17.09.2017 15:50
Если чекбокс активен то.... KEMPZOR Общие вопросы Javascript 2 25.03.2017 01:21
Jquery validation если заполнено одно из полей Nikita21 jQuery 6 13.10.2016 13:37
закладка в firefox нажимающая кнопку на сайте sparky Events/DOM/Window 6 11.11.2015 05:10
Скрипт работает только если подключать js в самом низу html! Pekkonen jQuery 3 26.01.2011 01:44