jQuery pagination and fadein/fadeout

Question

I'm totally new and unfortunately I'm not good with jQuery. But I have the following problem and I would deeply appreciate your help!

I got a list of items that I want to paginate. I am already able to paginate that list consisting of

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

with the following scripts:

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

and

(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));

But I got three problems.

1.) Let's say I have 18 items in that list. So these 18 items generate 3 pages. I would like to have a smooth transition or fadein/fadeout effect between them. Unfortunately I did not succeed so far in doing so...

2.) Right now I have three buttons on the bottom for page 1, 2 and 3. I would like to have a "Previous" and "Next" button, but I don't know how to integrate that into my code.

3.) When I click on page 2 of my list of 18 items, the first 6 items are hidden. Unfortunately their <li> container is still there and has a margin, which seems to require space at the top.

I hope someone can help me.

Thanks in advance!

Edit: I was able to fix number 3) by myself. I assigned a class to the aforementioned <li> class and made it to <li class="pagination_show">. Then I updated the first code snippet and replaced .asa2_uhrenshop_main_container with .pagination_show.

Edit 2: I made a jsfiddle: https://jsfiddle.net/b8gmqx9p/

Answer 1

For issue 1, try this please,

(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)

I have changed itemsToShow.show("fast"); to itemsToShow.show(1500);

Here I'm passing time in milliseconds as the parameter instead of "fast", you can change that time parameter as per your requirements.

For issue 2, I suggest you go for a jQuery pagination plugin. There are plenty of them e.g, jQuery-Paging , smart paginator (this was decent, we used it in our application)

Follow these links too, http://www.thedevline.com/2015/01/best-free-jquery-pagination-plugins-for.html , http://www.designrazor.net/best-free-jquery-pagination-plugins/