jQuery pagination и fadein/fadeout

Question

Я совершенно новый и, к сожалению, я не очень хорошо разбираюсь в jQuery. Но у меня есть следующая проблема, и я буду очень признателен за вашу помощь!

У меня есть список предметов, которые я хочу разбивать на страницы. Я уже в состоянии постраничной этот список, состоящий из

<ul class="products_erweitert"> 
    <li> 
     <div class="asa2_uhrenshop_main_container"></div> 
    </li> 
    <li> 
     <div class="asa2_uhrenshop_main_container"></div> 
    </li> 
</ul> 

со следующими сценариями:

(function($){ 
    $(document).ready(function(){ 
     $(".pagination").customPaginate({ 
      itemsToPaginate : ".asa2_uhrenshop_main_container" 
     }); 
    }); 
})(jQuery); 

и

(function($){ 
    $.fn.customPaginate = function(options){ 
     var paginationContainer = this; 
     var itemsToPaginate; 
     var defaults = { 
      itemsPerPage : 6 
     }; 
     var settings = {}; 

     $.extend(settings, defaults, options); 

     var itemsPerPage = settings.itemsPerPage; 

     itemsToPaginate = $(settings.itemsToPaginate); 
     var numberOfPaginationLinks = Math.ceil((itemsToPaginate.length/itemsPerPage)); 

     $("<ul></ul>").prependTo(paginationContainer); 

     for(var index = 0; index < numberOfPaginationLinks; index++){ 
      paginationContainer.find("ul").append("<li>"+ (index+1) + "</li>"); 
     } 

     itemsToPaginate.filter(":gt(" + (itemsPerPage - 1) + ")").hide(); 

     paginationContainer.find("ul li").on('click', function(){ 
      var linkNumber = $(this).text(); 
      var itemsToHide = itemsToPaginate.filter(":lt(" + ((linkNumber-1) * itemsPerPage) + ")"); 
      $.merge(itemsToHide, itemsToPaginate.filter(":gt(" + ((linkNumber * itemsPerPage) - 1) + ")")); 
      itemsToHide.hide(); 

      var itemsToShow = itemsToPaginate.not(itemsToHide); 
      itemsToShow.show("fast"); 
     }); 
    }; 
}(jQuery)); 

Но у меня три проблемы.

1.) Допустим, у меня есть 18 предметов в этом списке. Таким образом, эти 18 элементов генерируют 3 страницы. Я хотел бы иметь плавный переход или эффект fadein/fadeout между ними. К сожалению, я этого пока не сделал ...

2.) Прямо сейчас у меня есть три кнопки внизу для страниц 1, 2 и 3. Я хотел бы иметь «предыдущий» и «следующий», , но я не знаю, как интегрировать это в свой код.

3.) Когда я нажимаю на страницу 2 моего списка из 18 предметов, первые 6 предметов скрыты. К сожалению, их контейнер <li> все еще существует и имеет запас, который, кажется, требует места наверху.

Я надеюсь, что кто-то может мне помочь.

Заранее благодарен!

Редактировать: я смог исправить номер 3). Я назначил класс для вышеупомянутого класса <li> и сделал его <li class="pagination_show">. Затем я обновил первый фрагмент кода и заменил .asa2_uhrenshop_main_container на .pagination_show.

Edit 2: Я сделал jsfiddle: https://jsfiddle.net/b8gmqx9p/

Answer 1

По вопросу 1, попробовать это, пожалуйста,

(function($){ 

     $.fn.customPaginate = function(options) 
     { 
      var paginationContainer = this; 
      var itemsToPaginate; 


      var defaults = { 

       itemsPerPage : 3 

      }; 

      var settings = {}; 

      $.extend(settings, defaults, options); 

      var itemsPerPage = settings.itemsPerPage; 

      itemsToPaginate = $(settings.itemsToPaginate); 
      var numberOfPaginationLinks = Math.ceil((itemsToPaginate.length/itemsPerPage)); 

      $("<ul></ul>").prependTo(paginationContainer); 

      for(var index = 0; index < numberOfPaginationLinks; index++) 
      { 
       paginationContainer.find("ul").append("<li>"+ (index+1) + "</li>"); 
      } 

      itemsToPaginate.filter(":gt(" + (itemsPerPage - 1) + ")").hide(); 

      paginationContainer.find("ul li").on('click', function(){ 

       var linkNumber = $(this).text(); 

       var itemsToHide = itemsToPaginate.filter(":lt(" + ((linkNumber-1) * itemsPerPage) + ")"); 
       $.merge(itemsToHide, itemsToPaginate.filter(":gt(" + ((linkNumber * itemsPerPage) - 1) + ")")); 
       itemsToHide.hide(); 

       var itemsToShow = itemsToPaginate.not(itemsToHide); 
       itemsToShow.show(1500); 

      }); 

     } 

}(jQuery)); 

(function($){ 

    $(document).ready(function(){ 

     $(".pagination").customPaginate({ 

      itemsToPaginate : ".pagination_show" 

     }); 

    }); 

})(jQuery) 

Я изменил itemsToShow.show("fast"); к itemsToShow.show(1500);

Здесь я передаю время в миллисекундах как параметр вместо «быстрого», вы можете изменить этот параметр времени в соответствии с вашими требованиями.

Для вопроса 2, я предлагаю вам перейти на плагин pagination jQuery. Есть много из них, например, jQuery-Paging, smart paginator (это был порядочный, мы использовали его в нашем приложении)

Следуйте эти ссылки тоже, http://www.thedevline.com/2015/01/best-free-jquery-pagination-plugins-for.html, http://www.designrazor.net/best-free-jquery-pagination-plugins/