HI WELCOME TO KANSIRIS

Pagination

Leave a Comment

 $('document').ready(function () {


    //Table pagination
    //Number of rows need to show for table
    var rowsShown = 3;

    $('.table-responsive').each(function () {
        var rowsTotal = $(this).find('tbody tr').length;
        if (rowsTotal > rowsShown) {
            $(this).after('<div class="pagination1"><div class="pagination"></div></div>');
            var numPages = rowsTotal / rowsShown;
            for (i = 0; i < numPages; i++) {
                var pageNum = i + 1;
                $(this).next('.pagination1').find('.pagination').append('<a href="#" rel="' + i + '">' + pageNum + '</a> ');               
            }

            var totalPageLength = $(this).next('.pagination1').find('.pagination').find('a').length;
            if (totalPageLength > rowsShown) {
                $(this).next('.pagination1').find('.pagination').prepend('<a href="#" rel="#prevPage" id="previousPageShow" class="prevnext" style="display:none">< Previous </a> ').
                    append('<a href="#" rel="#nextPage" class="prevnext" id="nextpageShow" style="width:auto">Next ></a> ');
            } else {
                $(this).next('.pagination1').find('.pagination').find('.prevnext').hide();
            }

            $(this).next('.pagination1').find('.pagination a[rel]').each(function () {
                var maxPagelength = $(this).attr('rel');
                if (maxPagelength >= rowsShown) {
                    $(this).hide();
                }
            });

        }
        
        $(this).find('tbody tr').hide();
        $(this).find('tbody tr').slice(0, rowsShown).show();
        $(this).next('.pagination1').find('.pagination').find('a[rel="0"]').addClass('active');


    });

    $('.pagination a').on('click', function (e) {
        e.preventDefault();

        var currPage = $(this).attr('rel');

        if (currPage == "#prevPage") {
             //Clicked on the Previous button
            var findLastpageDisplaying = $(this).siblings('a:visible').first().attr('rel');
            findLastpageDisplaying = parseInt(findLastpageDisplaying, 10);
            var needToSHowNextPage = findLastpageDisplaying - rowsShown;  

            $(this).siblings('a:visible').hide();

            $(this).parents('.pagination').find('a').each(function () {
                $(this).removeClass('active');
                var firstMatchedItem = $(this).attr('rel');
                
                if (firstMatchedItem >= needToSHowNextPage && firstMatchedItem < findLastpageDisplaying) {
                    $(this).show();
                    if (firstMatchedItem == "0") {
                        $(this).prev().hide();
                    }
                }

                $(this).parents('.pagination').find('a#nextpageShow').show();
                
            });


          var findpreviousButton =   $(this).parents('.pagination').find('a:visible').is("#previousPageShow");
            if (!findpreviousButton) {
                $(this).parents('.pagination').find('a:visible:eq(0)').addClass('active');
                currPage = $(this).parents('.pagination').find('a:visible:eq(0)').attr('rel');
            } else {
                $(this).parents('.pagination').find('a:visible:eq(1)').addClass('active');
                currPage = $(this).parents('.pagination').find('a:visible:eq(1)').attr('rel');
            }  
            startItem = currPage * rowsShown;
            endItem = startItem + rowsShown;

        } else if (currPage == "#nextPage") {
            //Clicked on the next button

            //Finding last page in the current view pagination
            var findLastpageDisplaying = parseInt($(this).siblings('a:visible').last().attr('rel'),10)+1;
            findLastpageDisplaying = parseInt(findLastpageDisplaying, 10);
            var needToSHowNextPage = findLastpageDisplaying + rowsShown;      


            //To hide next button 
            var indexLastPage = $(this).siblings().last().attr('rel');
            var findLastIndexPrevious = $(this).parents('.pagination').find('a:visible').last().prev().attr('rel');
            findLastIndexPrevious = parseInt(findLastIndexPrevious, 10);

            $(this).siblings('a:visible').hide();

            $(this).parents('.pagination').find('a').each(function () {
                $(this).removeClass('active');
                var firstMatchedItem = parseInt(($(this).attr('rel')), 10);  
               
                if (firstMatchedItem >= findLastpageDisplaying && firstMatchedItem < needToSHowNextPage) {
                    $(this).show();

                    if (firstMatchedItem == indexLastPage) {
                        $(this).next().hide();
                        $(this).siblings('a#previousPageShow').show();
                        return false;
                    }
                } 

                $(this).siblings('a#previousPageShow').show();

            });  

            $(this).parents('.pagination').find('a:visible:eq(1)').addClass('active');
            currPage = $(this).parents('.pagination').find('a:visible:eq(1)').addClass('active').attr('rel');
            startItem = currPage * rowsShown;
            endItem = startItem + rowsShown;
            

        } else {           
            startItem = currPage * rowsShown;
            endItem = startItem + rowsShown;
            $(this).siblings().removeClass('active');
            $(this).addClass('active');
        }

        $(this).parents('.pagination1').prev().find('tbody tr').css('opacity', '0.0').hide().slice(startItem, endItem).
            css('display', 'table-row').animate({ opacity: 1 }, 300);
    });

})

0 comments:

Post a Comment

Note: only a member of this blog may post a comment.