CODEWITHSUNDEEP
jquery
user2491321
user2491321

Reputation: 673

jquery pagination add active button

I have the following jquery code, which displays pages from first to last. The poblem is that I cannot create active button. For example if I am looking at page 4, then page 4 to have a different color showing to user that page 4 is currently selected.

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

       var defaults = {
            itemsPerPage : 5
       };

       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").first().addClass(settings.activeClass).end().on('click', function(){

           var $this = $(this);
           $this.addClass(settings.activeClass);
           $this.siblings().removeClass(settings.activeClass);

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

Upvotes: 0

Views: 479

Answers (2)

Thomas Westermann
Thomas Westermann

Reputation: 11

Just add : $('li').attr('class', ''); $(this).attr('class', 'active');

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

In the onclick function.

Upvotes: 1

Alkis Kalogeris
Alkis Kalogeris

Reputation: 17745

When you are on the active page then you add an active class to the li that is active. Just give proper style to the active class.

//If you want further assistance, create a jsfiddle

Upvotes: 0

Related Questions