How to add pagination to filter product page (using jQuery and PHP)

Question

When I try to add pagination with limit of 5 products on each page maximum, it only show 5 products but next and previous page is not working. I think something is collapsing with jQuery script. How can I add pagination to this.

I am using this script:

$(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();
        }
    });

});

And in fetch_data page I'm passing the result to index page as echo $output .

Answer 1

here check this pagination i create using Bootstrap and Jquery maybe it will help you.

but for your question maybe it's be it's better to create a SandBox or JsFiddle so i can help you with.

 // 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>

How to add pagination to filter product page (using jQuery and PHP)

Question

1 answers

solution1
0 2019-12-12 11:52:15

How to add pagination to filter product page (using jQuery and PHP)

Question

1 answers

solution1 0 2019-12-12 11:52:15

solution1
0 2019-12-12 11:52:15