Skip to content

Instantly share code, notes, and snippets.

@dougkeeling
Created May 7, 2022 18:12
Show Gist options
  • Save dougkeeling/ad7c5103a8e585bd5ab5fe1c92e5d143 to your computer and use it in GitHub Desktop.
Save dougkeeling/ad7c5103a8e585bd5ab5fe1c92e5d143 to your computer and use it in GitHub Desktop.
[AJAX Load Posts w/Pagination] Get posts via AJAX with custom pagination. Requires jQuery. #wordpress #ajax #php #javascript
<?php
add_action( 'wp_ajax_kdm-pagination-load-posts', 'kdm_pagination_load_posts' );
add_action( 'wp_ajax_nopriv_kdm-pagination-load-posts', 'kdm_pagination_load_posts' );
function kdm_pagination_load_posts() {
global $wpdb;
// Set default variables
$msg = '';
if(isset($_POST['page'])){
// Sanitize the received page
$post_type = sanitize_text_field($_POST['post_type']);
$page = sanitize_text_field($_POST['page']);
$cur_page = $page;
$page -= 1;
$posts_per_page = $_POST['posts_per_page'] ? $_POST['posts_per_page'] : 8;
$previous_btn = true;
$next_btn = true;
$first_btn = true;
$last_btn = true;
$start = $page * $posts_per_page;
$args = array(
'posts_per_page' => $posts_per_page,
'paged' => $cur_page,
'post_type' => $post_type,
);
ob_start();
$posts_query = new WP_Query($args);
// write_log($posts_query->query);
$total_posts = $posts_query->found_posts;
if($posts_query->have_posts()): ?>
<?php while($posts_query->have_posts()): $posts_query->the_post();?>
<div class='video popup' data-mfp-src='#popup-<?php echo get_the_ID(); ?>'>
<div class='post-image'>
<?php the_post_thumbnail(); ?>
</div>
<div class='post-details'>
<?php the_title(); ?>
</div><!-- /.post-details -->
</div><!-- /.video -->
<div id='popup-<?php echo get_the_ID(); ?>' class='mfp-hide'>
<?php the_title(); ?>
</div>
<?php endwhile; ?>
<?php endif;
// This is where the magic happens
$pag_container = "";
$no_of_paginations = ceil($total_posts / $posts_per_page);
if($no_of_paginations > 1):
if ($cur_page >= 7) {
$start_loop = $cur_page - 3;
if ($no_of_paginations > $cur_page + 3)
$end_loop = $cur_page + 3;
else if ($cur_page <= $no_of_paginations && $cur_page > $no_of_paginations - 6) {
$start_loop = $no_of_paginations - 6;
$end_loop = $no_of_paginations;
} else {
$end_loop = $no_of_paginations;
}
} else {
$start_loop = 1;
if ($no_of_paginations > 7)
$end_loop = 7;
else
$end_loop = $no_of_paginations;
}
// Pagination Buttons logic
$pag_container = "
<div class='file-list-pagination'>
<ul>";
if ($first_btn && $cur_page > 1) {
$pag_container .= "<li p='1' class='end active'><i class='fa fa-angle-double-left'></i></li>";
} else if ($first_btn) {
$pag_container .= "<li p='1' class='end inactive'><i class='fa fa-angle-double-left'></i></li>";
}
if ($previous_btn && $cur_page > 1) {
$pre = $cur_page - 1;
$pag_container .= "<li p='$pre' class='end active'><i class='fa fa-angle-left'></i></li>";
} else if ($previous_btn) {
$pag_container .= "<li class='end inactive'><i class='fa fa-angle-left'></i></li>";
}
for ($i = $start_loop; $i <= $end_loop; $i++) {
if ($cur_page == $i)
$pag_container .= "<li p='$i' class = 'selected' >{$i}</li>";
else
$pag_container .= "<li p='$i' class='active'>{$i}</li>";
}
if ($next_btn && $cur_page < $no_of_paginations) {
$nex = $cur_page + 1;
$pag_container .= "<li p='$nex' class='end active'><i class='fa fa-angle-right'></i></li>";
} else if ($next_btn) {
$pag_container .= "<li class='end inactive'><i class='fa fa-angle-right'></i></li>";
}
if ($last_btn && $cur_page < $no_of_paginations) {
$pag_container .= "<li p='$no_of_paginations' class='end active'><i class='fa fa-angle-double-right'></i></li>";
} else if ($last_btn) {
$pag_container .= "<li p='$no_of_paginations' class='end inactive'><i class='fa fa-angle-double-right'></i></li>";
}
$pag_container = $pag_container . "
</ul>
</div>";
endif;
// We echo the final output
echo $msg . $pag_container;
$data = array();
$html = ob_get_clean();
$data['html'] = $html;
$data['total'] = $total_posts;
$data['query'] = $posts_query;
$data['queryTotal'] = $posts_query->found_posts;
wp_send_json_success( $data );
exit;
}
// Always exit to avoid further execution
exit();
} ?>
<div id='container-id'
class='class-name'
data-post-type='post'
data-posts-per-page='3'
></div>
function kdm_load_posts(page,container){
jQuery(function($) {
var postsPerPage = $(container).data('posts-per-page'),
postType = $(container).data('post-type'),
data = {
page: page,
post_type: postType,
posts_per_page: postsPerPage,
action: "kdm-pagination-load-posts"
};
// Send the data
$.post(
ajax_data.ajaxurl,
data,
function(response) {
// alert(JSON.stringify(response));
$(container).empty().append(response.data.html);
},
'json'
);
});
}
jQuery(document).ready(function($) {
kdm_load_posts(1,'#container-id');
// Handle the clicks. Can work for various containers on one page if they all have the same .class-name
$('body').on('click','.class-name li.active',function(){
var page = $(this).attr('p'),
elID = '#' + $(this).closest('.class-name').attr('id');
kdm_load_posts(page,elID);
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment