Wordpress custom post type ajax load more pagination

Question

I have created this page template for jobs positions in wordpress. I want to implement an ajax load more system if there are more than ten positions available. I don't know how to paginate the results and I never implemented something similar in wordpress. can anyone help me?

<?php get_header(); ?>

<?php if( has_post_thumbnail() ): ?>
<div class="jumbotron jumbotron-fluid page-cover">
  <div class="parallax" data-parallax-image="<?php the_post_thumbnail_url(); ?>"></div>
  <div class="container">
    <div class="row">
      <div class="col-sm-12 col-md-12 col-lg-12 text-right inner-parallax">
        <h1 class="parallax-section-title"><?php the_title(); ?></h1>
      </div>
    </div>
  </div>
  <div class="parallax-overlay"></div>
</div>
<?php endif; ?>
<div class="container-fluid content-wrapper" id="wrapper">
  <div class="row page-row-justified justify-content-center" style="padding-bottom:0;">
<?php if( have_posts() ): while( have_posts() ): the_post(); ?>
<?php the_content(); ?>
<?php endwhile; ?>
<?php endif; ?>
  </div>
<?php $careers = new WP_Query( ['post_type' => 'careers', 'posts_per_page' => 10 ] );  ?>
  <div class="row page-row-justified justify-content-center">
<?php if( $careers->have_posts() ): while( $careers->have_posts() ): $careers->the_post(); ?>
    <div class="col-sm-12 col-md-8 col-lg-8 card career-card">
      <h4 class=""><a class="career-link" data-toggle="collapse" href=".position-details" class=""><?php the_title(); ?></a></h4>
      <small class="career-date"><i class=""></i> <?php the_date('d/m/Y'); ?></small>
      <div class="row">
        <div class="col-sm-12 col-md-12 col-lg-12 position-details collapse">
          <p class="career-details text-justify"><?php echo get_the_content(); ?></p>
          <hr>
          <h4><a class="career-mail-link" href="mailto:example@demo.com?subject=<?php the_title(); ?>"><i class="fas fa-envelope"></i> <?php _e('Apply'); ?></a></h4>
        </div>
      </div>
    </div>
<?php endwhile; ?>
<?php else: ?>
  <div class="col-sm-12 col-md-8 col-lg-8">
    <p class="section-claime text-danger hide"><?php _e('No position available.'); ?></p>
  </div>
<?php endif; ?>
  </div>

</div>

<?php get_footer(); ?>

Answer 1

Try This

<?php
    $args= array(
        'post_type' => 'post',
        'post_status' => 'publish',
        'posts_per_page' => 10,
        'ignore_sticky_posts' => true,
        'paged' => 1
    );
    $my_posts = new WP_Query( $args );
    if ( $my_posts->have_posts() ) :
      while ( $my_posts->have_posts() ) : $my_posts->the_post();
      // Your code for post
      endwhile;
    endif;
?>
<button class="btn a loadmore_event">View More</button>

Ajax

var ajaxurl = "<?php echo admin_url( 'admin-ajax.php' ); ?>";
var page = 2;
jQuery(function($) {
$('body').on('click', '.loadmore_event', function() {
    var data = {
        'action': 'load_posts_by_event',
        'page': page,
        'security': '<?php echo wp_create_nonce("load_more_posts"); ?>'
    };

    $.post(ajaxurl, data, function(response) {
        if(response != '') {
            $('your class name').append(response);
            page++;
        } else {
        }
    });
});
});

Functions.php

    add_action('wp_ajax_nopriv_load_posts_by_event', 'load_posts_event');

    function load_posts_event() {
       $paged = $_POST['page'];
       $args = array(
          'post_type' => 'post',
          'post_status' => 'publish',
          'posts_per_page' => 10,
          'ignore_sticky_posts' => true,
          'paged' => $paged
      );
    $my_posts = new WP_Query( $args );
    if ( $my_posts->have_posts() ) :
       while ( $my_posts->have_posts() ) : $my_posts->the_post();
          // Your code for post
          endwhile;
        endif;
}// function closing tag