Skip to content

Instantly share code, notes, and snippets.

@EddyRespondek
Last active April 27, 2024 08:44
Show Gist options
  • Save EddyRespondek/83ee2a3d5eb266d74f16 to your computer and use it in GitHub Desktop.
Save EddyRespondek/83ee2a3d5eb266d74f16 to your computer and use it in GitHub Desktop.
Wordpress - Simple AJAX Pagination
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' );
<?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
}
}
?>
(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 );
@khaaere
Copy link

khaaere commented Apr 27, 2024

Thanks for this

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment