Как сделать разбиение на страницы, используя массив без использования любого плунгина?

Question

Я использовал pagination, показывая и скрывая 10 результатов. , но я хочу, чтобы это было сделано через array. Если I click следующая страница, то 10 значений должны быть загружены от array.

Все элементы массива загружаются изначально, но я хочу каждый раз загружать 10 результатов при выборе номеров страниц, таких как (1, 2, 3 и т. Д.), Т. Е. В то время как ul должно иметь загружено всего 10 литров. [все ли не должны находиться внутри ul]

, пожалуйста, помогите мне в этом.

Здесь скрипку: http://jsfiddle.net/3qu7u4ej/13/

Script

$(document).ready(function() { 

    /* search results data */ 
    var searchResults = [ 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'}, 
     {'searchHeader' : 'Lorem Ipsum - Dolor Sit Amet', 
     'searchResult' : 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque dapibus ex vel nulla rhoncus viverra. Proin sed erat vel purus suscipit ultrices sed in ipsum. Aenean leo ut vestibulum posuere.', 
     'searchType' : 'Article', 
     'searchDate' : 'Posted: MM/DD/YYYY'} 

    ] 

    /* search results data display */ 
    for(var i=0; i<searchResults.length; i++){ 
     $('.search-results--display').append('<li><p class="search-results--header">'+i+'&nbsp;'+searchResults[i].searchHeader+'</p>'+searchResults[i].searchResult+'<p class="search-results--info"><span class="search-results--type">'+searchResults[i].searchType+'</span><span class="search-results--date">Posted: '+searchResults[i].searchDate+'</span></p></li>');   
    } 
    var show_per_page = 10; 
    pagination = function(page,show_per_page){ 
      var number_of_items = $('#paginate li').size(); 
      var number_of_pages = Math.ceil(number_of_items/show_per_page); 
      var number_of_pages_todisplay = 5; 
      var navigation_html = ''; 
      var current_page = page; 
      var current_link = (number_of_pages_todisplay >= current_page ? 1 : number_of_pages_todisplay + 1); 
      if (current_page > 1) 
       current_link = current_page; 
      if (current_link != 1) 
       navigation_html += "<li class='firstbutton'><a class='nextbutton' href=\"javascript:first();\">Start</a></li><li><a class='prevbutton paginationButton' href=\"javascript:previous();\">Prev&nbsp;</a></li>"; 
      if (current_link == number_of_pages - 1) 
       current_link = current_link - 3; 
      else if (current_link == number_of_pages) 
       current_link = current_link - 4; 
      else if (current_link > 2) 
       current_link = current_link - 2; 
      else 
       current_link = 1; 
      var pages = number_of_pages_todisplay; 
      while (pages != 0) { 
       if (number_of_pages < current_link) { 
        break; 
       } 
       if (current_link >= 1) 
        navigation_html += "<li><a class='paginationButton " + ((current_link == current_page) ? "currentPageButton" : "numericButton") + "' href=\"javascript:showPage(" + current_link + ","+show_per_page+")\" longdesc='" + current_link + "'>" + (current_link) + "</a></li>"; 
       current_link++; 
       pages--; 
      } 
      if (number_of_pages > current_page){ 
       navigation_html += "<li><a class='nextbutton paginationButton' href=\"javascript:next()\">Next</a></li><li class='lastbutton'><a class='nextbutton' href=\"javascript:last(" + number_of_pages + ");\">Last</a></li>"; 
      } 
      $('#page_navigation').html(navigation_html); 
     } 

     var pageSize = 10; 

     showPage = function (page,show_per_page) { 
      /*var current_page_number = parseInt($('#current_page').val())+1); 
      $.extend(searchResultsCopy,searchResults); 
      searchResults.slice(
      $('.search-results--display').html()*/ 
      $("#paginate li").hide(); 
      $('#current_page').val(page); 
      $("#paginate li").each(function (n) { 
       if (n >= pageSize * (page - 1) && n < pageSize * page) 
        $(this).show(); 
      }); 
      pagination(page,show_per_page); 
     } 
     showPage(1,10); 
     next = function() { 
      new_page = parseInt($('#current_page').val()) + 1; 
      showPage(new_page,show_per_page); 
     } 
     last = function (number_of_pages) { 
      new_page = number_of_pages; 
      $('#current_page').val(new_page); 
      showPage(new_page,show_per_page); 
     } 
     first = function() { 
      var new_page = "1"; 
      $('#current_page').val(new_page); 
      showPage(new_page,show_per_page);  
     } 
     previous = function() { 
      new_page = parseInt($('#current_page').val()) - 1; 
      $('#current_page').val(new_page); 
      showPage(new_page,show_per_page); 
     } 

     $('.search-results--results-per-page a').on('click',function(e){ 
      e.preventDefault(); 
      $('.search-results--results-per-page a').removeClass('currentPageButton'); 
      $(this).addClass('currentPageButton'); 
      if($(this).hasClass('display-20')) 
       pageSize = 20; 
      else if($(this).hasClass('display-50')) 
       pageSize = 50; 
      else if($(this).hasClass('display-all')) 
       pageSize = $(".search-results--display li").length; 
      else 
       pageSize = 10; 
      showPage(1,pageSize);   
     }); 
}); 

Answer 1

Привет друзья я получил ответ на этот вопрос, спасибо за ваши откликается

Fiddle: https://jsfiddle.net/pak2ytnb/

HTML

<div class="search-results"> 
<div class="search-results--display" id="paginate"> 
    <!-- search results will be displayed here --> 
</div> 

<!-- pagination div for mobile and ipad--> 
<div class="search-results--pagination-rep-ipad"> 
    <span class="search-results--left-res icon-arrow-blue-left-1x"></span> 
    <p class="search-results--prev"><span class="icon-arrow-blue-left-1x"></span><span class="pagination-text">Prev</span></p> 
    <p class="search-results--curr">Page 2 of 10</p> 
    <p class="search-results--next"><span class="pagination-text">Next</span><span class="icon-arrow-blue-right-1x"></span></p> 
    <span class="search-results--right-res icon-arrow-blue-right-1x"></span> 
</div> 
<!-- responsive pagination div ends here--> 

<div class="search-results--pagination"> 
    <ul class="search-results--pages" id='page_navigation'> 
     <!-- pagination rendered dynamically through script--> 
    </ul> 
    <input type='hidden' id='current_page' /> 

    <ul class="search-results--results-per-page"> 
     <li>Results per page:</li> 
     <li><a href="#" class="display-10 paginationButton currentPageButton">10</a></li> 
     <li><a href="#" class="display-20 paginationButton">20</a></li> 
     <li><a href="#" class="display-50 paginationButton">50</a></li> 
     <li class="view-all-results"><a href="#" class="paginationButton  display-all">View All</a></li> 
    </ul> 
</div>