0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.