如何添加分页来过滤产品页面（使用 jQuery 和 PHP）

Question

当我尝试在每个页面上添加最多 5 个产品的分页时，它只显示 5 个产品，但下一页和上一页不起作用。我认为 jQuery 脚本正在崩溃。如何为此添加分页。

我正在使用这个脚本：

$(document).ready(function(){

    filter_data();

    function filter_data()
    {
        $('.filter_data').html('<div id="loading" style="" ></div>');
        var action = 'fetch_data';
        var minimum_price = $('#hidden_minimum_price').val();
        var maximum_price = $('#hidden_maximum_price').val();
        var brand = get_filter('brand');
        var ram = get_filter('ram');
        var storage = get_filter('storage');
        $.ajax({
            url:"fetch_data.php",
            method:"POST",
            data:{action:action, minimum_price:minimum_price, maximum_price:maximum_price, brand:brand, ram:ram, storage:storage},
            success:function(data){
                $('.filter_data').html(data);
            }
        });
    }

    function get_filter(class_name)
    {
        var filter = [];
        $('.'+class_name+':checked').each(function(){
            filter.push($(this).val());
        });
        return filter;
    }

    $('.common_selector').click(function(){
        filter_data();
    });

    $('#price_range').slider({
        range:true,
        min:1000,
        max:65000,
        values:[1000, 65000],
        step:500,
        stop:function(event, ui)
        {
            $('#price_show').html(ui.values[0] + ' - ' + ui.values[1]);
            $('#hidden_minimum_price').val(ui.values[0]);
            $('#hidden_maximum_price').val(ui.values[1]);
            filter_data();
        }
    });

});

在 fetch_data 页面中，我将结果作为echo $output 传递给索引页面。

Answer 1

在这里检查我使用 Bootstrap 和 Jquery 创建的分页，也许它会对你有所帮助。

但是对于您的问题，最好创建一个 SandBox 或 JsFiddle，这样我可以帮助您。

// https://reqres.in/api/users

$(document).ready(function (){

    var users = {
        content: $('#tableContent'),
        pagination: $('ul.pagination'),
        currentPage: 1,
        maxPage: null,
        init: function () {
            const self = this;
            this.fetchData();
            this.pagination.on('click','li', function () {
                self.handlePagination($(this).data('page'));
            })
        },
        fetchData: function () {
            const self = this;
            return $.ajax({
                url: "https://reqres.in/api/users?per_page=3&page=" + self.currentPage,
                type: "GET",
                beforeSend: function () {
                    self.showToDom(`<p>Loading ...</p>`)
                },
                success: function(response){
                    // update maxPage
                    self.maxPage = response.total_pages;
                    const Template = self.createFragment(response);
                    self.showToDom(Template);
                }
            });
        },
        showToDom: function (dom) {
            this.content.empty().append(dom);
        },
        handlePagination: function (info) {
            if ( info === "next" ) {
                this.handleNext();
            } else if ( info === "prev" ) {
                this.handlePrev();
            } else {
                this.handlePage(info);
            }
        },
        handleNext: function () {
            this.currentPage++;
            if ( this.currentPage > this.maxPage ) this.currentPage = this.maxPage;
            this.fetchData();
        },
        handlePrev: function (){
            this.currentPage--;
            if ( this.currentPage <= 0 ) this.currentPage = 0;
            this.fetchData();
        },
        handlePage: function (num) {
            this.currentPage = num;
            this.fetchData()
        },
        createFragment: function (res) {
            console.log('pagination response', res);
            let body = ``;
            res.data.forEach(function (item) {
                body += `
                <tr>
                    <th scope="row">
                        <img src=${item.avatar}>
                    </th>
                    <td>${item.first_name}</td>
                    <td>${item.last_name}</td>
                    <td>${item.email}</td>
                </tr>
                `;
            })

            return body;
        }

    };
    // init the Object
    users.init();
})

.content {
    display: block;
    min-height: 500px;

}

.navigation {

    width: 100%;
}

img {

    width:40px;
    height: 40px;
}

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="index.css">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <title>Document</title>
</head>
<body>


    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="content">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-12">
                <nav aria-label="Page navigation example">
                    <ul class="pagination">
                      <li class="page-item" data-page="prev"><a class="page-link" href="#">Previous</a></li>
                      <li class="page-item" data-page="1"><a class="page-link" href="#">1</a></li>
                      <li class="page-item" data-page="2"><a class="page-link" href="#">2</a></li>
                      <li class="page-item" data-page="3"><a class="page-link" href="#">3</a></li>
                      <li class="page-item" data-page="next"><a class="page-link" href="#">Next</a></li>
                    </ul>
                  </nav>
            </div>
        </div>
    </div>



</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
<script src="index.js"></script>
</html>