Загрузите сообщения Wordpress в кусках 100 за один раз с помощью Ajax и JQuery

Question

Мне нужна помощь, чтобы немного изменить код JQuery/Ajax. Следующий код загружает новый Wordpress на сообщения каждый раз, когда я прокрутки в нижней

jQuery(function($){ 
    var page = 1; 
    var loading = true; 
    var $window = $(window); 
    var $content = $("body #ordrene"); 
    var load_posts = function(){ 
      $.ajax({ 
       type  : "GET", 
       data  : {numPosts : 1, pageNumber: page}, 
       dataType : "html", 
       url  : "http://www.mysite.com/wp-content/themes/twentythirteen-child/loopHandler.php", 
       beforeSend : function(){ 
        if(page != 1){ 
         $content.append('<div id="temp_load" style="text-align:center">' + 
          '<img src="../images/ajax-loader.gif" />' + 
          '</div>'); 
        } 
       }, 
       success : function(data){ 
        $data = $(data); 
        if($data.length){ 
         $data.hide(); 
         $content.append($data); 
         $data.fadeIn(500, function(){ 
          $("#temp_load").remove(); 
          loading = false; 
         }); 
        } else { 
         $("#temp_load").remove(); 
        } 
       }, 
       error  : function(jqXHR, textStatus, errorThrown) { 
        $("#temp_load").remove(); 
        alert(jqXHR + " :: " + textStatus + " :: " + errorThrown); 
       } 
     }); 
    } 
    $window.scroll(function() { 
     var content_offset = $content.offset(); 
     console.log(content_offset.top); 
     if(!loading && ($window.scrollTop() + 
      $window.height()) > ($content.scrollTop() + $content.height() + content_offset.top)) { 
       loading = true; 
       page++; 
       load_posts(); 
     } 
    }); 
    load_posts(); 
}); 

На моем сайте я есть около 1000 постов, все, которые я хочу, чтобы отобразить на одной странице, так что я могу сортировать их с Jquery Сортируемый. Но сервер, на котором я нахожусь, не может справиться с тем, что многие сообщения загружаются один раз, поэтому я бы хотел, чтобы ue ajax разорвал запрос на базу данных на несколько кусков.

Для этого я хотел был бы изменить код выше (или получить совет по совершенно новому коду), чтобы сделать следующее: На загрузке страницы получите 100 сообщений. Когда загружаются первые 100 сообщений, забирайте еще 100 и так далее, пока не загрузятся все мои сообщения Wordpress.

Если кто-то может мне помочь, я бы очень признателен!

Андерс

UPDATE:

Мой файл loopHandler.php выглядит следующим образом

<?php 
// Our include 
define('WP_USE_THEMES', false); 
require_once('../../../wp-load.php'); 

// Our variables 
$numPosts = (isset($_GET['numPosts'])) ? $_GET['numPosts'] : 0; 
$page = (isset($_GET['pageNumber'])) ? $_GET['pageNumber'] : 0; 

echo $numPosts; 
echo $page; 

$kundenavn = get_the_title(); 
$category_id = get_cat_ID($kundenavn); 

query_posts('cat=' . $category_id . '&posts_per_page=' . $numPosts . '&paged=' . $page);  

if (have_posts()) : while (have_posts()) : the_post(); ?> 

    //Content of the loop 

<?php  
endwhile; 
endif; 

wp_reset_query(); 
?> 

Answer 1

Вы могли бы попробовать что-то вроде этого:

jQuery(function($) { 
    var page = 1; 
    var loading = true; 
    var $window = $(window); 
    var $content = $("body #ordrene"); 
    var load_posts = function() { 
    console.log("Loading posts, page is:",page); 
    $.ajax({ 
     type: "GET", 
     data: {numPosts: 100, pageNumber: page}, //changed this 
     dataType: "html", 
     url: "http://www.kundelogg.no/wp-content/themes/twentythirteen-child/loopHandler.php", 
     beforeSend: function() { 
     if (page !== 1) { 
      $content.append('<div id="temp_load" style="text-align:center">' + 
        '<img src="../images/ajax-loader.gif" />' + 
        '</div>'); 
     } 
     }, 
     success: function(data) { 
     console.log("Received data, length is:",data.length); 
     $data = $(data); 
     if ($data.length) { 
      $data.hide(); 
      $content.append($data); 
      $data.fadeIn(500, function() { 
      $("#temp_load").remove(); 
      loading = false; 
      }); 
     } else { 
      $("#temp_load").remove(); 
     } 
     if (data === "")//make sure php returns empty string if no more posts 
      return; 
     pageNumber++;//added this 
     load_posts();//added this 
     }, 
     error: function(jqXHR, textStatus, errorThrown) { 
     $("#temp_load").remove(); 
     alert(jqXHR + " :: " + textStatus + " :: " + errorThrown); 
     } 
    }); 
    }; 
    load_posts(); 
});