jQuery分页和淡入/淡出

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 个页面。我想在它们之间有一个平滑的过渡或淡入/淡出效果。不幸的是，到目前为止我还没有成功...

2.) 现在我在页面 1、2 和 3 的底部有三个按钮。我想要一个“上一个”和“下一个”按钮，但我不知道如何将它集成到我的代码。

3.) 当我单击 18 项列表的第 2 页时，前 6 项被隐藏。不幸的是，他们的<li> 容器仍然存在并且有一个边距，这似乎需要在顶部留出空间。

我希望有人可以帮助我。

提前致谢！

编辑：我能够自己修复数字 3)。我为前面提到的<li> 分配了一个类，并将其分配给<li class="pagination_show">。然后我更新了第一个代码 sn-p 并将 .asa2_uhrenshop_main_container 替换为 .pagination_show。

编辑 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，我建议您使用 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/