Как сделать пагинацию на jquery, который привязан к категориям фильтра?

Question

[Dmitry Mazikin]

у меня на тестовом сайте есть пункты меню - все , ужасы , камедии , экшн и документальные.
Я сделал фильтр при нажатии на пункт меню показывается выбранная категория.
но я никак не могу понять как сделать пагинацию в таком варианте. Чтобы он показывал по 4 штуки из 8 в выбранной категории ,да и изначально чтобы по 4 штуки выводил

$(function() {
    let filter = $("[data-filter]");
    filter.on("click", function(event) {
        event.preventDefault();
        //
        let category = $(this).data("filter");
        let start = 3;
        let show = 3;

        if (category == "all") {
            $(".films-item").removeClass("hide");
        } else {
            $("[data-category]").each(function() {
                let itemCategory = $(this).data("category");
                if (itemCategory != category) {
                    $(this).addClass("hide");
                } else {
                    console.log(itemCategory.length);
                    $(this).removeClass("hide");
                }
            });
        }
        linkText = $(this).text();
        let btn = $(".btn");
        btn.text(linkText);
        btn.on("click", function() {
            $(".films-item").removeClass("hide");
            btn.hide();
        });
    });
});

вот код меню

<ul class="menu">
                    <li class="menu__item">
                        <a href="" class="menu__link" data-filter="all">Все</a>
                    </li>
                    <li class="menu__item">
                        <a href="" class="menu__link" data-filter="horror">Ужасы</a>
                    </li>
                    <li class="menu__item">
                        <a href="" class="menu__link" data-filter="camedy">Комедия</a>
                    </li>
                    <li class="menu__item">
                        <a href="" class="menu__link" data-filter="action">Экшн</a>
                    </li>
                    <li class="menu__item">
                        <a href="" class="menu__link" data-filter="docs">Документальные</a>
                    </li>
                </ul>

вот контент

<div class="films-item" data-category="horror">
                    <div class="films-item__img">
                        <img src="img/films/poster.png" alt="poster" />
                    </div>
                    <div class="films-item__title">Ходячие мертвецы</div>
                    <div class="films-item__year">
                        <span clss="bold">Год выпуска:</span>
                        <span>2004</span>
                    </div>
                    <div class="films-item__country">
                        <span>Страна:</span>
                        <span>Германия</span>
                    </div>
                    <div class="films-item__genre">
                        <span>Жанр:</span>
                        <span>Ужасы</span>
                    </div>
                </div>

Comments

[Сергей Сергей]

$( `[data-category=${category}]` ).slice( start, start + 4 ).removeClass( 'hide' );

[Dmitry Mazikin]

Сергей Сергей, не работает, ничего не скрывает . А если вставить в код ,то пункт все перестает работать. не выводит список фильмов ((

[WapSter]

Dmitry Mazikin, даю тебе фундамент для подобной задачи. Просто скопипастить и вставить не выйдет включай логику и применяй уже для себя

const allItems = ['Item 1', 'Item 2', 'Item 3', 'Item 4', 'Item 5', 'Item 6', 'Item 7']; // Все доступные элементы например лежат в бд

const getAllPages = (limitItemsOnPage) => { // функция возвращает доступное число страниц
  return Math.ceil(allItems.length / limitItemsOnPage)
}

const getItemsOnPage = (pageNumber, limitItemsOnPage) => { // функция возвращает элементы для определенной страниы
  return allItems.slice(limitItemsOnPage * (pageNumber - 1), limitItemsOnPage * pageNumber);
}

console.log(getAllPages(4)) // 2 - получаем  количество страниц
console.log(getItemsOnPage(1, 4)) // ["Item 1","Item 2","Item 3","Item 4"] - элементы для страницы один
console.log(getItemsOnPage(2, 4)) // ["Item 5","Item 6","Item 7"] - элементы для страницы 2

[Dmitry Mazikin]

WapSter, я в этом то ничего не понимаю (

[WapSter]

Dmitry Mazikin, ну значит не судьба)

[ThunderCat]

@DancingGod68

я в этом то ничего не понимаю (

«Хабр Q&A» — это узкоспециализированный сервис вопросов и ответов, предназначенный для IT-специалистов и всех тех, кто отчаянно пытается ими стать.

Очевидно, что если вы не относитесь к категориям перечисленным в правилах сервиса, то будете подвергнуты дискриминации по непрофессиональному признаку, так как нарушаете пункт правил 5.12.

[Dmitry Mazikin]

ThunderCat, так я же пытаюсь научиться этому )))

[ThunderCat]

Dmitry Mazikin,

даю тебе фундамент для подобной задачи.

я в этом то ничего не понимаю (

Так и не будете, если не будете разбирать непонятные куски. Какой смысл ждать что за тебя все сделают? Надо садиться и разбираться.