jQuery 分页和 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 页的底部有三个按钮。我想要一个 "Previous" 和 "Next" 按钮，但我不知道如何将其集成到我的代码中。

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

希望有人能帮助我。

提前致谢！

编辑：我能够自己修复数字 3)。我给前面提到的 <li> class 分配了一个 class 并使其成为 <li class="pagination_show">。然后我更新了第一个代码片段并将 .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);

这里我将以毫秒为单位的时间作为参数而不是 "fast" 传递，您可以根据需要更改该时间参数。

对于第 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/

jQuery 分页和 fadein/fadeout

jQuery pagination and fadein/fadeout

html

jquery

pagination

fadeout

fadein