Ajax Filtering Pagination

Question

I see this is a common problem, but I cannot find the solution.

I have made ajax filtering when user click on checkbox. Everything is working until user click on pagination. Of course, we are then on admin-ajax.php page and pagination links are not working.

Here is the code.

HTML checkboxes:

<input type="checkbox" id="telegram_chk" checked>
<input type="checkbox" id="twitter_chk" checked>
<input type="checkbox" id="eth_chk" checked>
<input type="checkbox" id="xml_chk" checked>

JavaScript:

jQuery('#content').on('change', '#telegram_chk, #twitter_chk, #eth_chk, #xml_chk', function(e) {
    e.preventDefault();

    if (jQuery('#telegram_chk').is(":checked"))
    var telegram="";
    else
    var telegram="facebook";

    if (jQuery('#twitter_chk').is(":checked"))
    var twitter="";
    else 
    var twitter="twitter";

    if (jQuery('#eth_chk').is(":checked")) 
    var eth="";
    else 
    var eth="ethereum"; 

    if (jQuery('#xml_chk').is(":checked")) 
    var xml="";
    else 
    var xml="stellar";  


    var checkboxes = [telegram, twitter, eth, xml]

    jQuery.ajax({           

        url : rml_obj.ajax_url,
        type : 'post',
        data : {
            action : 'test_function',
            security : rml_obj.check_nonce,
            test_data : checkboxes
        },
        success : function( response ) {

            jQuery('#result').html(response);

        }
    });

});

And functions.php:

function test_function() {  
check_ajax_referer( 'rml-nonce', 'security' );  
$test_data = $_POST['test_data'];

$telegram= $test_data[0];
$twitter = $test_data[1];
$ethereum= $test_data[2];
$stellar = $test_data[3];

$tax_query_args[] = array(

    'relation' => 'AND',

    array(
        'taxonomy' => 'filters',
        'field'    => 'slug',
        'terms'    => array ($telegram, $twitter),
        'relation' => 'AND',
        'operator' => 'NOT IN'
        ), 

    array(
        'taxonomy' => 'platform',
        'field'    => 'slug',
        'terms'    => array ($ethereum, $stellar),
        'relation' => 'AND',
        'operator' => 'NOT IN'
        ),

    );

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$args = array(
    'post_type'      => 'post' ,
    'orderby'        => 'date',
    'order'          => 'DESC',
    'posts_per_page' => 15,
    'cat'            => 4,
    'paged'          => $paged,             
    'tax_query' => $tax_query_args
    ); 
$q = new WP_Query($args);
    if ( $q->have_posts() ) { 
    while ( $q->have_posts() ) {
    $q->the_post();?>

?>
<div>
Display results
</div>
<?php

}
$pages =$q->max_num_pages;  
$range = 2;
$showitems = ($range * 2);

if(1 != $pages) {
    echo "<div class='pagination'>";                    
    if($paged > 1 && $showitems < $pages) echo "<a class='inactive' href='".get_pagenum_link($paged - 1)."'>&lsaquo;</a>";  
    if ($pages > $showitems) {
    if($showitems == $paged) {echo "<a class='inactive' href='".get_pagenum_link(1)."'>1</a>";}
    if($paged > $showitems) {echo "<a class='inactive' href='".get_pagenum_link(1)."'>1</a>"; echo '<span class="inactive">..</span>';}
}

for ($i=1; $i <= $pages; $i++) {
    if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )) {
        echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";
    }
}

if ($pages > $showitems) {
    if ( ($paged < $pages) && ($pages-$paged >= $showitems) ) { 
        echo '<span class="inactive">..</span>'; echo "<a class='inactive' href='".get_pagenum_link($pages)."'>".$pages."</a>";
    }
    if ( ($paged < $pages) && ($pages-$paged == $showitems-1) ) { 
        echo "<a class='inactive' href='".get_pagenum_link($pages)."'>".$pages."</a>";}
    }   
    if ($paged < $pages && $showitems < $pages) {
        echo "<a class='inactive' href='".get_pagenum_link($paged + 1)."'>&rsaquo;</a>"; 
        echo "</div>\n";
    }
}
}    
else {
    echo "Sorry, we have not found any posts.";
}

die();

}
add_action('wp_ajax_test_function', 'test_function'); 
add_action('wp_ajax_nopriv_test_function', 'test_function');

I would really appreciate any help to solve this problem.

Thank you.

Answer 1

I'd do it like this: (see the // comment here in the code)

// Wrap the AJAX call to `test_function` in a `function`.
function ajaxTestFunction( page_num ) {
    if (jQuery('#telegram_chk').is(":checked"))
    var telegram="";
    else
    var telegram="facebook";

    if (jQuery('#twitter_chk').is(":checked"))
    var twitter="";
    else 
    var twitter="twitter";

    if (jQuery('#eth_chk').is(":checked")) 
    var eth="";
    else 
    var eth="ethereum"; 

    if (jQuery('#xml_chk').is(":checked")) 
    var xml="";
    else 
    var xml="stellar";  


    var checkboxes = [telegram, twitter, eth, xml]

    jQuery.ajax({           

        url : rml_obj.ajax_url,
        type : 'post',
        data : {
            action : 'test_function',
            security : rml_obj.check_nonce,
            test_data : checkboxes,
            paged: page_num || 1
        },
        success : function( response ) {

            jQuery('#result').html(response);

        }
    });
}

// In the `change` callback, we call `ajaxTestFunction()`.
jQuery( '#content' ).on( 'change', '#telegram_chk, #twitter_chk, #eth_chk, #xml_chk', function( e ) {
    // Starts at page #1
    ajaxTestFunction();
});

// And add a listener/callback for the pagination clicks.
jQuery( '#result' ).on( 'click', '.pagination a', function( e ){
    e.preventDefault();

    var paged = /[\?&]paged=(\d+)/.test( this.href ) && RegExp.$1;

    ajaxTestFunction( paged );
});

And in the PHP test_function() function, capture paged like this:

$paged = $_POST['paged'];

..and not:

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

Additional Note

Why don't you utilize the paginate_links() function in WordPress? =)

The code starting from this line:

$pages =$q->max_num_pages;

..up until the } above this:

}    
else {
    echo "Sorry, we have not found any posts.";
}

..can be replaced with this:

$links = paginate_links([
    'base'    => '%_%',
    'format'  => '?paged=%#%',
    'total'   => $q->max_num_pages,
    'current' => $paged,
]);

if ( $links ) {
    echo '<div class="pagination">';
        echo $links;
    echo '</div>';
}

See https://codex.wordpress.org/Function_Reference/paginate_links and/or https://developer.wordpress.org/reference/functions/paginate_links/.