Основная проблема с разбивкой по страницам с использованием JQuery

Question

Я пытаюсь сделать базовую разбивку на страницы на своем веб-сайте с помощью JQuery. (Код ниже). Все работает отлично, но я заметил, что он загружает все результаты запроса, а затем просто нарезает его с помощью функций «slice». Это в основном просто скрывает дополнительные результаты в фоновом режиме. Я не хочу загружать все результаты, я хочу загрузить только 4 из них, и когда пользователи нажимают на следующий или второй номер, я хочу загрузить следующие 4 результата, не загружая их все равно и просто нарезая их.

$(document).ready(function(){ 
      //Problem about this is that it loads all the images and just slice them up. 

      //Declaring variables 
      var page = 1; 
      var per_page = 4; 
      var items = $('.row').length; 
      var page_last = Math.ceil(items/per_page); 

      //Set Page 
      function setPage(page){ 
       $('.row').slice(0, page * per_page).hide(); 
       $('.row').slice(page * per_page - per_page, page * per_page).show(); 
       $('.row').slice(page * per_page).hide(); 

      } 

      //Next Button 
      $('.next').click(function(){ 
       if(page < page_last){ 
        $('.links.link_' + page).attr('href', '#').css('color', 'white'); 
        page++; 
        $('.links.link_' + page).removeAttr('href').css('color', 'gray'); 
        setPage(page); 
       } 
      }); 

      //Previous Button 
      $('.prev').click(function(){ 
       if(page > 1){ 
        $('.links.link_' + page).attr('href', '#').css('color', 'white'); 
        page--; 
        $('.links.link_' + page).removeAttr('href').css('color', 'gray'); 
        setPage(page); 
       } 
      }); 

      //Generate Page Links 
      for(x = 1; x <= page_last; x++){ 
       if(x == 1){ 
        $('.pages').append(' <a style="color:gray" class="links link_' + x + '">' + x + '</a>'); 

       }else{ 
        $('.pages').append(' <a href="#" class="links link_' + x + '">' + x + '</a>'); 
       } 
      } 
      //Links Functions 

      $('.links').click(function(){ 
       $('.links.link_' + page).attr('href', '#').css('color', 'white'); 
       page = $(this).html(); 
       $('.links.link_' + page).removeAttr('href').css('color', 'gray'); 
       setPage(page); 
      }); 


      $('.next, .prev').click(function(event){ 
       event.preventDefault(); 
      }); 

      setPage(1); 
}); 

Answer 1

Что делать, если результаты запроса являются большими? он будет загружать данные очень медленно. как насчет использования ajax для загрузки данных, когда пользователь нажимает следующий или второй номер?