Задать вопрос
Ответы пользователя по тегу JavaScript
  • Как сделать пагинацию используя HTML и JS и не сломать фильтр?

    Azurre
    @Azurre
    Web Developer
    Как сказал alexanchek это нужно делать на стороне сервера. Но если Вы точно уверенны, что в Вашем случае нужно это делать у клиента, то должно быть как то так:

    function app() {
        let currentPage = 1;
        let currentCategory;
        const itemsPerPage = 4;
        const buttons = document.querySelectorAll('.btn')
        const cards = document.querySelectorAll('.card')
        const pages = document.querySelectorAll('.pagination-item > a');
    
        function setPage(page, offset) {
            if (page !== undefined) {
                currentPage = page;
            } else {
                currentPage += offset;
                const pagesTotal = Math.ceil(cards.length / itemsPerPage)
                if (currentPage < 0) {
                    currentPage = 0;
                } else if (currentPage > pagesTotal) {
                    currentPage = pagesTotal;
                }
            }
        }
    
        function filter (items) {
            items.slice((currentPage - 1 * itemsPerPage) ).forEach((item) => {
                const isItemFiltered = !item.classList.contains(currentCategory)
                const isShowAll = currentCategory === 'all'
                if (isItemFiltered && !isShowAll) {
                    item.classList.add('hide-filter')
                } else {
                    item.classList.remove('hide-filter')
                }
            })
        }
    
        buttons.forEach((button) => {
            button.addEventListener('click', () => {
                currentCategory = button.dataset.filter
                // currentPage = 1; // Eсли нужно сбросить страницу при смене фильтра
                filter(cards)
            })
        })
    
        pages.forEach((link) => {
            link.addEventListener('click', () => {
                if (link.classList.contains('item-prev')) {
                    setPage(undefined, -1);
                } else if(link.classList.contains('item-next')) {
                    setPage(undefined, 1);
                } else {
                    setPage(link.dataset.page);
                }
                filter(cards)
            })
        })
    }


    Ссылки с пагинацией должны иметь дата-аттрибут "page" с номером страницы.
    Код не тестировал, могут быть опечатки, но в целом должно быть понятно.
    Ответ написан
    Комментировать
  • Как реализовать select multiple?

    Azurre
    @Azurre
    Web Developer
    Подставьте вместо this.value в onchange
    Array.from(this.selectedOptions).map(option => option.value)
    Ответ написан
    Комментировать