WordPress Lazy Pagination

functions.php

<?php 


add_action('wp_ajax_morepage', 'morepage');
add_action('wp_ajax_nopriv_morepage', 'morepage');

/**
 * 
 * posts_per_page have to set with your pagination value
 **/
function morepage() {

    global $post;
    if ($_POST['paged']) {

        // Handle request then generate response using WP_Ajax_Response
        $args = array(
            'post_type' => 'post',
            'posts_per_page' => 20,
            'paged' => $_POST['paged'],
            'orderby' => 'title',
            'order' => 'asc'
        );

        $query = new WP_Query($args);

        $paged = absint($_POST['paged']);
        if ($paged <= $query->max_num_pages) {
            
            if ($query->have_posts()): while ($query->have_posts()): $query->the_post();

                    $hotel = $post;
                    $hotel_meta = get_post_custom($hotel->ID);
                    listato_item($hotel, $hotel_meta, true);

                endwhile;
            endif;


            $paged++;
            echo "<div data-page='" . $paged . "' class='morepage'><p>Loading...</p></div>";
            
        }
    }

    die();
}

morepage.js

/**
 * 
 * required: https://github.com/miziomon/jquery.appear
 * 
 * ajaxurl --> url for admin-ajax.php
 * .morepage  --> item class that activate ajax content loading
 * .items_wrapper --> wrapper for single item
 **/

loading = false;
$('.morepage').appear();
$(document.body).on('appear', '.morepage', function(e, $affected) {

    if (!loading) {
        loading = true;
        console.log($(this).attr("data-page"))
        $.post( ajaxurl,
                {
                    'action': 'morepage',
                    'data': $(this).attr("data-page"),
                    'paged': $(this).attr("data-page")
                },
        function(response) {
            $(".morepage").remove();
            loading = false;
            $(".items_wrapper").append(response);
        }
        );
    }


});

single.php

 <?php 
if (have_posts()) : 
    while (have_posts()) : the_post(); 
         get_template_part('parts/content', get_post_format()); 
     endwhile; 
     ?>
    <!-- trigger when .morepage "appear" in viewport  --> 
    <div data-page='2' class='morepage'><p>Loading...</p></div>

<?php else : endif; ?>