使用 JS 的分页 + 过滤下拉菜单

Question

我正在尝试使用 JS 添加过滤器下拉菜单和分页。过滤器下拉菜单工作正常。但是不知道怎么用JS添加分页功能

我的问题是：

我可以在用户点击过滤器菜单后每页只显示 8 个缩略图吗？
是否可以在筛选结果小于8条时隐藏分页？

这是图片和代码。如有任何建议，我们将不胜感激。

<body>

<div class="container">
    <div class="row">
        <div class="select mb-3 mt-3">
            <select class="type mr-2">
                <option value="all">Type</option>
                <option value="one">one</option>
                <option value="two">two</option>
                <option value="three">three</option>
            </select>
            <select class="grade mr-2">
                <option value="all">Grade</option>
                <option value="one">one</option>
                <option value="two">two</option>
                <option value="three">three</option>
            </select>
            <select class="subject mr-2">
                <option value="all">Subject</option>
                <option value="one">one</option>
                <option value="two">two</option>
                <option value="three">three</option>
            </select>
        </div>
    </div>

    <div class="row">
        <div class="col-3 property-item" data-grade="one" data-type="two" data-subject="three"><img src="https://picsum.photos/200"><br />image one</div>
        <div class="col-3 property-item" data-grade="two" data-type="one" data-subject="one"><img src="https://picsum.photos/200"><br />image one</div>
        <div class="col-3 property-item" data-grade="four" data-type="one" data-subject="one"><img src="https://picsum.photos/200"><br />image one</div>
        <div class="col-3 property-item" data-grade="two" data-type="four" data-subject="two"><img src="https://picsum.photos/200"><br />image one</div>
        <div class="col-3 property-item" data-grade="one" data-type="two" data-subject="one"><img src="https://picsum.photos/200"><br />image one</div>
        <div class="col-3 property-item" data-grade="two" data-type="three" data-subject="one"><img src="https://picsum.photos/200"><br />image one</div>
        <div class="col-3 property-item" data-grade="three" data-type="one" data-subject="one"><img src="https://picsum.photos/200"><br />image one</div>
        <div class="col-3 property-item" data-grade="two" data-type="one" data-subject="one"><img src="https://picsum.photos/200"><br />image one</div>
        <div class="col-3 property-item" data-grade="one" data-type="three" data-subject="one"><img src="https://picsum.photos/200"><br />image one</div>

    <div class="mb-3 mt-3">
        <nav aria-label="...">
            <ul class="pagination">
                <li class="page-item disabled">
                    <a class="page-link" href="#" tabindex="-1">Previous</a>
                </li>
                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                <li class="page-item">
                    <a class="page-link" href="#">2 <span class="sr-only">(current)</span></a>
                </li>
                <li class="page-item"><a class="page-link" href="#">3</a></li>
                <li class="page-item">
                    <a class="page-link" href="#">Next</a>
                </li>
            </ul>
        </nav>
    </div>
</div>

<script>
$("select.grade, select.type, select.subject").change(update);

function update() {
    var resourceGrade = $('select.grade').val();
    var resourceType = $('select.type').val();
    var resourceSubject = $('select.subject').val();

    $('.property-load-section')
        .find('.property-item')
        .hide()
        .filter(function () {
            var okResourceType = true;
            if (resourceType !== "all") {
                okResourceType = $(this).attr('data-type').split(',').includes(resourceType);
            }
            var okResourceGrade = true;
            if (resourceGrade !== "all") {
                okResourceGrade = $(this).attr('data-grade').split(',').includes(resourceGrade);
            }
            var okResourceSubject = true;
            if (resourceSubject !== "all") {
                var okResourceSubject = $(this).attr('data-subject').split(',').includes(resourceSubject);
            }
            return okResourceGrade && okResourceType && okResourceSubject;
        })
        .fadeIn('fast');
}</script>

Answer 1

const itemPerPage = 2
$('select').change(function () {
    pagination(itemPerPage)
});

function filter() {
    const resourceGrade = $('select.grade').val();
    const resourceType = $('select.type').val();
    const resourceSubject = $('select.subject').val();
    return $('.property-load-section')
        .find('.property-item')
        .hide()
        .filter(function () {
            let okResourceGrade = resourceGrade === 'all' ? true : $(this).data('grade') === resourceGrade;
            let okResourceType = resourceType === 'all' ? true : $(this).data('type') === resourceType;
            let okResourceSubject = resourceSubject === 'all' ? true : $(this).data('subject') === resourceSubject;
            return okResourceGrade && okResourceType && okResourceSubject;
        })
}

function pagination(itemPerPage = 8) {
    $("#pagin").html('')
    //Pagination
    let pageSize = itemPerPage;
    let currentPage = 0;

    let pageCount = filter().show().length / pageSize;

    $("#pagin").append(prevButton())

    for (let i = 0; i < pageCount; i++) {
        $("#pagin").append('<li class="page-item"><a href="#" class="page-link">' + (i + 1) + '</a></li> ');
    }

    $("#pagin").append(nextButton())

    let showPage = function (page) {
        $("#pagin li").removeClass('active');
        $("#pagin li").eq(page).addClass("active");
        currentPage = page
        if (page === 1) {
            $("#pagin li.btn-prev").addClass('disabled')
        } else {
            $("#pagin li.btn-prev").removeClass('disabled')
        }

        filter().each(function (n) {
            if (n >= pageSize * (page - 1) && n < pageSize * page) {
                $(this).show();
            }
        });
    }

    function nextButton() {
        const next = $('<li class="page-item btn-next"><span class="page-link">Next</span></li>')
        $(next).click(function () {
            if (!$(this).is('.disabled')) {
                if (currentPage < Math.ceil(pageCount)) {
                    showPage(currentPage + 1)
                }
            }
            return false;
        })
        return next;
    }

    function prevButton() {
        const prev = $('<li class="page-item btn-prev"><span class="page-link">Prev</span></li>')
        $(prev).click(function () {
            if (!$(this).is('.disabled')) {
                showPage(currentPage - 1)
            }
        })
        return prev;
    }

    showPage(1);

    $("#pagin li a").click(function () {
        $("#pagin li").removeClass("active");
        $(this).addClass("active");
        showPage(parseInt($(this).text()));
    });
}

pagination(itemPerPage)

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container">
    <div class="row">
        <div class="select mb-3 mt-3">

            <select class="grade mr-2">
                <option value="all">Grade</option>
                <option value="one">one</option>
                <option value="two">two</option>
                <option value="three">three</option>
            </select>
            <select class="type mr-2">
                <option value="all">Type</option>
                <option value="one">one</option>
                <option value="two">two</option>
                <option value="three">three</option>
            </select>
            <select class="subject mr-2">
                <option value="all">Subject</option>
                <option value="one">one</option>
                <option value="two">two</option>
                <option value="three">three</option>
            </select>
        </div>
    </div>

    <div class="row main property-load-section">
        <div class="col-3 property-item" data-grade="one" data-type="two" data-subject="three"><img
                src="https://picsum.photos/200"><br/>Page 1 one two three
        </div>
        <div class="col-3 property-item" data-grade="two" data-type="one" data-subject="one"><img
                src="https://picsum.photos/200"><br/>Page 2 two one one
        </div>
        <div class="col-3 property-item" data-grade="four" data-type="one" data-subject="one"><img
                src="https://picsum.photos/200"><br/>Page 3 four one one
        </div>
        <div class="col-3 property-item" data-grade="two" data-type="four" data-subject="two"><img
                src="https://picsum.photos/200"><br/>Page 4 two four two
        </div>
        <div class="col-3 property-item" data-grade="one" data-type="two" data-subject="one"><img
                src="https://picsum.photos/200"><br/>Page 5 one two one
        </div>
        <div class="col-3 property-item" data-grade="two" data-type="three" data-subject="one"><img
                src="https://picsum.photos/200"><br/>Page 6 two three one
        </div>
        <div class="col-3 property-item" data-grade="three" data-type="one" data-subject="one"><img
                src="https://picsum.photos/200"><br/>Page 7 three one one
        </div>
        <div class="col-3 property-item" data-grade="two" data-type="one" data-subject="one"><img
                src="https://picsum.photos/200"><br/>Page 8 two one one
        </div>
        <div class="col-3 property-item" data-grade="one" data-type="three" data-subject="one"><img
                src="https://picsum.photos/200"><br/>Page 9 one three one
        </div>

    </div>
    <div class="mb-3 mt-3">
        <nav aria-label="...">
            <ul id="pagin" class="pagination">

            </ul>
        </nav>
    </div>
</div>


<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>

使用 JS 的分页 + 过滤下拉菜单

Paginations + Filter dropdown menus using JS

javascript

pagination

drop-down-menu