[AJAX Load Posts w/Pagination] Get posts via AJAX with custom pagination. Requires jQuery. #wordpress #ajax #php #javascript

ajax.php

<?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();

} ?>

markup.php

<div id='container-id'
    class='class-name' 
    data-post-type='post' 
    data-posts-per-page='3'
    ></div>

scripts.js

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);
    });
  
});