Wordpress custom post type ajax pagination

custom-post-type-ajax-pagination.php

<?php
/*
* Custom Post Pagination
* @since 1.0.0
* return 
*/
if (!function_exists('ic_custom_posts_pagination')) :
    function ic_custom_posts_pagination($the_query=NULL, $paged=1){

        global $wp_query;
        $the_query = !empty($the_query) ? $the_query : $wp_query;

        if ($the_query->max_num_pages > 1) {
            $big = 999999999; // need an unlikely integer
            $items = paginate_links(apply_filters('adimans_posts_pagination_paginate_links', array(
                'base' => str_replace($big, '%#%', esc_url(get_pagenum_link($big))),
                'format' => '?paged=%#%',
                'prev_next' => TRUE,
                'current' => max(1, $paged),
                'total' => $the_query->max_num_pages,
                'type' => 'array',
                'prev_text' => ' <i class="fas fa-angle-double-left"></i> ',
                'next_text' => ' <i class="fas fa-angle-double-right"></i> ',
                'end_size' => 1,
                'mid_size' => 1
            )));

            $pagination = "<div class=\"col-sm-12 text-center\"><div class=\"ic-pagination\"><ul><li>";
            $pagination .= join("</li><li>", (array)$items);
            $pagination .= "</li></ul></div></div>";

            echo apply_filters('ic_posts_pagination', $pagination, $items, $the_query);
        }
    }
endif;

simple-ajax-post-pagination.js

// AJAX PAGINATION
$('.ic-pagination a').live('click', function(e){
	e.preventDefault();
	var properties_wrapper = $('.properties-wrapper');
	var link = jQuery(this).attr('href');

	// opacity and disable on click
	properties_wrapper.css({
	   'opacity' : '0.5',
	   'pointer-events' : 'none'
	});

	$.get(link, function(data, status) {
		//console.log(status);

		var properties = jQuery(".properties-wrapper .row", data);
		properties_wrapper.html(properties); // load properties
		// scroll in top of wrapper section
		$('html,body').animate({ 
				scrollTop: properties_wrapper.offset().top - 150
			}, 'slow'
		);

		// opacity and disable on click
		properties_wrapper.css({
		   'opacity' : '1',
		   'pointer-events' : 'all'
		});
	});

	//pagination.load(link+' .ic-pagination ul');
	// update url
	//window.history.pushState('obj', 'client', link);
	//return false;

});
		

simple-ajax-post-pagination.php

<?php
$property_per_page = 6;
if ( get_query_var( 'paged' ) ) { 
  $paged = get_query_var( 'paged' ); 
} elseif ( get_query_var( 'page' ) ) { 
  $paged = get_query_var( 'page' ); 
} else { 
  $paged = 1; 
}
$args = array(
  'post_type'        	=> 'property',
  'posts_per_page'  	=> $property_per_page ? (int)$property_per_page : 6,
  'paged' 		=> $paged,
);
// the query
$property_query = new WP_Query( $args );
if ( $property_query->have_posts() ) : ?>

<div class="properties-wrapper">
  <div class="row">
    <!-- the loop -->
    <?php while ( $property_query->have_posts() ) : $property_query->the_post(); ?>
      <h2><?php the_title(); ?></h2>
    <?php endwhile; ?>
    <!-- end of the loop -->
  </div>

  <!-- pagination here -->
  <div class="row">
    <div class="col-md-12">
      <?php ic_custom_posts_pagination($property_query, $paged); ?>
    </div>
  </div>
</div><!-- .properties-wrapper -->

  <?php wp_reset_postdata(); ?>
				
<?php else : ?>
    <p class="text-warning"><?php esc_html_e( 'Sorry, no property matched your criteria.', 'ichelper' ); ?></p>
<?php endif; ?>

Nice Work @raazon, this worked 100%, but I had to make some little adjustments.

With PHP version 8.+ and WordPress 5.8 made these changes.
instead of

if ( get_query_var( 'paged' ) ) { 
  $paged = get_query_var( 'paged' ); 
} elseif ( get_query_var( 'page' ) ) { 
  $paged = get_query_var( 'page' ); 
} else { 
  $paged = 1; 
}

just use: $paged = get_query_var('paged') ?? get_query_var('page') ?? 1;

And in the Jquery, use .on() rather than the .live() function as it's deprecated from version 1.7+, and uncomment these line
//pagination.load(link+' .ic-pagination ul');
//window.history.pushState('obj', 'client', link);

for the pagination to refresh, change the
pagination.load(link+' .ic-pagination ul');
to
$('.ic-pagination ul').load(link+' .ic-pagination ul');

HOPE THIS HELP

Hi, I tried to use this code but AJAX is only working once, on the next click the page is being reloaded, maybe you had a similar issue and solved it?