Wordpress - Simple AJAX Pagination

functions.php

function get_posts_for_pagination() {
    $html = '';
    $paged = ( $_GET['page'] ) ? $_GET['page'] : 1;
    $post_type = $_GET['posttype'];

    if ( empty($post_type) ) {
        return '';
    }

    if( filter_var( intval( $paged ), FILTER_VALIDATE_INT ) ) {

        $args = array(
            'post_type' => $post_type,
            'paged' => $paged,
            'posts_per_page' => 4,
            'post_status' =>'publish'
        );

        $loop = new WP_Query( $args );

        $post_count = $loop->found_posts;
        $max_num_pages = $loop->max_num_pages;
            
        if( $loop->have_posts() ) {
            while( $loop->have_posts() ) {
                $loop->the_post();
                
                $html .= 'your output'
            }
            wp_reset_query();
        }
    }
    
    echo $html;
    exit();
}

add_action( 'wp_ajax_pagination', 'get_posts_for_pagination' );
add_action( 'wp_ajax_nopriv_pagination', 'get_posts_for_pagination' );

loop-archive-posttype.php

<?php
global $wp_query;

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

$args = array(
    'post_type' => array('my-post-type'),
    'paged' => $paged,
    'posts_per_page' => 4,
    'post_status' =>'publish',
);

$loop = new WP_Query( $args );

$post_count = $loop->found_posts;

if( $loop->have_posts() ) {
	while( $loop->have_posts() ) {
    	$loop->the_post();
	}
    
    if ( $post_count > 4 ) {
        ?>
        <div id="pagination">
            <a href="page/2/" class="infinite-more next"><span class="sprite"></span>More</a>
            <span id="pagination-post-type">my-post-type</span>
        </div>
        <?php
    }
}
?>

main.js

(function( $ ) {
	
	$.fn.wpPagination = function( options ) {
		options = $.extend({
			links: "a",
			action: "pagination",
			ajaxURL: "http://" + location.host + "/wp-admin/admin-ajax.php",
			next: ".next"
		}, options);
		
		function WPPagination( element ) {
			this.$el = $( element );
			this.init();
		}
		
		WPPagination.prototype = {
			init: function() {
				this.createLoader();
				this.createEnd();
				this.handleNext();
				this.handleLinks();
			},
			createLoader: function() {
				var self = this;
				$('#pagination').prepend( "<span id='pagination-loader'>Loading...</span>" );
				$('#pagination-loader').hide();
			},
			createEnd: function() {
				var self = this;
				$('#pagination').prepend( "<span id='pagination-end'>End</span>" );
				$('#pagination-end').hide();
			},
			handleNext: function() {
				var self = this;
				var $next = $( options.next, self.$el );
			},
			handleLinks: function() {
				var self = this,
				$links = $( options.links, self.$el ),
				$pagination = $( "#pagination" );
				$loader = $( "#pagination-loader" );
				$end = $( "#pagination-end" );
				
				$links.click(function( e ) {
					e.preventDefault();

					$('#pagination .next').fadeOut();
					$loader.fadeIn();

					var $a = $( this ),
					url = $a.attr("href"),
					page = url.match( /\d+/ ),
					pageNumber = page[0],
					data = {
						action: options.action,
						page: pageNumber,
						posttype: $('#pagination-post-type').text()
					};
					
					$.get( options.ajaxURL, data, function( html ) {
						$pagination.before( "<div id='page-" + pageNumber + "'></div>" );
						$pagination.before( html );
						$a.attr("href", url.replace('/' + pageNumber + '/', '/' + ( parseInt(pageNumber) + 1 ) + '/'));
						
						if ( !html ) {
							$('#pagination .next').remove();
							$loader.fadeOut();
							$end.fadeIn();
						} else {
							$loader.fadeOut();
							$('#pagination .next').fadeIn();
							smoothScroll($('#page-' + pageNumber), 85);
						}
					});
				});
			}
		};
		
		return this.each(function() {
			var element = this;
			var pagination = new WPPagination( element );
		});
	};
	
	$(function() {
		if( $( "#pagination" ).length ) {
			$( "#pagination" ).wpPagination();
		}
	});
	
})( jQuery );

Thanks for this, although you have a tiny syntax error with leads to a undefined variable. On main.js line 40-41 the semicolons (;) should be replaced with commas (,).

This code looks weird. The pagination html always link to page/2/ ? Shouldn't that vary?

Thanks for this