wp query – wp_query with pagination via ajax in WordPress

Question

I want to show custom posts by WP_Query with Pagination in WordPress. When I click the next button, then reload the page & go to admin-ajax.php. But Posts are load well, the main problem is pagination.

My Code Given Below:

functions.php

add_action('wp_ajax_actionFilter', 'my_filter_function'); 
add_action('wp_ajax_nopriv_actionFilter', 'my_filter_function');

function my_filter_function(){
    $args = array(
        'post_type' => 'post',
        'posts_per_page'=>1,
        'paged' => $paged,
    );
    
    if(isset( $_POST['division'] ) || isset( $_POST['district'] ) ){
        $args['meta_query'] = array(
            'relation'  =>  'OR',
            array(
                'key'   =>  'division',
                'value' =>  $_POST['division'],
                'compare'=>'='
            ),
            array(
                'key'   =>  'district_chittagong',
                'value' =>  $_POST['district'],
                'compare'=> '='
            ),
        );
    }
    
    $query = new WP_Query( $args );
    
                if( $query->have_posts() ){
                    while ( $query->have_posts() ) {
                        $query->the_post();
                        the_title();
                    }
                }else{
                    echo "No result found";
                }
                /* Restore original Post Data */
                wp_reset_postdata();
               
    ?>

    <div class="pagination justify-content-center">
        <?php

            $big = 999999999; // need an unlikely integer
            echo paginate_links(
                array(
                    'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
                    'format' => '?paged=%#%',
                    'current' => max(
                        1,
                        get_query_var('paged')
                    ),
                    'total' => $query->max_num_pages //$q is your custom query
                )
            );
        ?>
    </div>
    <?php
    die();
}

page-ajax-template.php

<form method="POST" action="<?php echo admin_url('admin-ajax.php');?>" id="filter">
    <div class="row">
        <div class="col-4">
            <select class="" name="division">
                <option value="-1">Select Division</option>
                <option value="barisal">Barisal</option>
                <option value="chittagong">Chittagong</option>
                <option value="dhaka">Dhaka</option>
                <option value="mymensingh">Mymensing</option>
                <option value="rajshahi">Rajshahi</option>
                <option value="rangpur">Rangpur</option>
                <option value="sylhet">Sylhet</option>
            </select>
        </div>
        <div class="col-4">
            <select class="" name="district">
                <option value="-1">Select Thana</option>
            </select>
        </div>
        <div class="col-4">
            <button type="submit" class="form-control-btn action-btn">Apply</button>
        </div>
    </div>
    <input type="hidden" name="action" value="actionFilter">
</form>
<div id="response"></div>

script.js


    jQuery(document).ready(function($){
        jQuery('.action-btn').on('click',function(event){
           event.preventDefault();
           var filter = $('#filter');
           
           $.ajax({
              url:filter.attr('action'),
              data:filter.serialize(),
              type:filter.attr('method'),
              beforeSend: function(xhr){
                  filter.find('button').text('Processing ...');
              },
              success: function(data){
                  filter.find('button').text('Apply');
                  $('#response').html(data);
              }
           });
           return false;
        });
        
        jQuery('.pagination').on('click','page-numbers',function(event){
            console.log('click');
            event.preventDefault();
        });
    });
    

Output:

enter image description here

0
Monzur Alam 2 months 2021-08-10T02:36:24-05:00 0 Answers 0 views 0

Leave an answer

Browse
Browse