Question

I’m building a table sorter and pagination script. Sorting works fine, and pagination on the last table works as a charme as well. The pagination’s previous and next buttons are broken on all previous tables. Can somebody tell me why?

Here is the jquery plugin:

 (function($)
{
    $.fn.tableSorterTwo = function(options)
    {
        var defaults = {
            pagination: 20
        }

        var options = $.extend(defaults, options);

        return this.each(function()
        {
            $(this).find('thead').addClass('noselect');
            $(this).find('thead th').each(function(column)
            {  
                $(this).addClass('sorting').click(function()
                {  
                    var $table = $(this).parent().parent().parent();
                    var findSortKey = function($cell)
                    {  
                        return $cell.find('.sort-key').text().toUpperCase() + ' ' + $cell.text().toUpperCase();  
                    }; 

                    var sortDirection = $(this).is('.sorting_asc') ? -1 : 1;  
                    var $rows = $table.find('tbody tr').get();  

                    $.each($rows, function(index, row)
                    {  
                        row.sortKey = findSortKey($(row).children('td').eq(column));  
                    });  

                    $rows.sort(function(a, b)
                    {  
                        if(!isNaN(a.sortKey) && !isNaN(b.sortKey))
                        {
                            var val = a.sortKey-b.sortKey;
                            if(val < 0) return -sortDirection;
                            if(val > 0) return sortDirection;                       
                        }
                        else if(a.sortKey.indexOf("%") >= 0)
                        {
                            var a = a.sortKey.replace(' %', '');
                            var b = b.sortKey.replace(' %', '');
                            var val = a-b;
                            if(val < 0) return -sortDirection;
                            if(val > 0) return sortDirection;
                        }
                        else
                        {
                            if(a.sortKey < b.sortKey) return -sortDirection;  
                            if(a.sortKey > b.sortKey) return sortDirection;  
                        }
                        return 0;  
                    });  

                    $.each($rows, function(index, row)
                    {  
                        $table.find('tbody').append(row);  
                        row.sortKey = null;  
                    });  

                    $table.find('thead th').removeClass('sorting_asc sorting_desc');  
                    var $sortHead = $table.find('thead th').filter(':nth-child(' + (column + 1) + ')');  
                    sortDirection == 1 ? $sortHead.addClass('sorting_asc') : $sortHead.addClass('sorting_desc');  
                    $table.find('tbody tr').removeClass('sorting').filter(':nth-child(' + (column + 1) + ')').addClass('sorting'); 
                    zebraRows($table);
                });     
            });

            // PAGINATION
            var totalRows = $(this).find('tbody tr').size();
            if(totalRows > options.pagination)
            {
                var totalPages = Math.ceil(totalRows/options.pagination);
                $(this).find('tbody').after('<tfoot><tr><th colspan="3" class="table-pagination"></th></tr></tfoot>');
            }

            var currentLink = 0;
            var numberLinks = ''; 
            if(totalPages > 1)
            {
                while(totalPages > currentLink)
                {
                    var active = (currentLink == 0) ? ' table-pagination-link-active' : '';
                    checkLinks($(this), currentLink, totalPages);
                    numberLinks += '<a href="' + (currentLink+1) + '" class="table-pagination-link' + active + '">' + (currentLink+1) + '</a>';
                    currentLink++;
                }
                $(this).find('tfoot tr th').html('<a href="1" class="table-pagination-link table-pagination-link-first no-active">&#171;</a>' +
                '<a href="1" class="table-pagination-link table-pagination-link-previous no-active">&#8249;</a>' +
                numberLinks +
                '<a href="2" class="table-pagination-link table-pagination-link-next no-active">&#8250;</a>' +
                '<a href="' + totalPages + '" class="table-pagination-link table-pagination-link-last no-active">&#187;</a> | <span class="table-pagination-overview no-active">1</span>/<span class="table-pagination-total no-active">' + totalPages + '</span>');
                $(this).find('tbody tr').hide().slice(0, options.pagination).show();
                $(this).find('.table-pagination-link-previous').hide();
                $(this).find('.table-pagination-link-first').hide();
            }

            $('.table-pagination-link').click(function()
            {
                var table = $(this).parents('table');
                var href = $(this).attr('href');
                $(table).find('.table-pagination-link').removeClass('table-pagination-link-active');
                if(!$(this).hasClass('no-active'))
                {
                    $(this).addClass('table-pagination-link-active');
                }
                if(href == totalPages)
                {
                    markActive(table, totalPages)
                }
                else if(href == 1)
                {
                    markActive(table, href);
                }
                goToPage(table, href, options.pagination);
                return false;
            });
        });
    };

    function zebraRows(table)
    {
        $(table).find('tbody tr:even').removeClass('even').addClass('even');
    }

    function markActive(table, href)
    {
        $(table).find('a[href="' + href + '"]').addClass('table-pagination-link-active');
        $(table).find('.no-active').removeClass('table-pagination-link-active');
    }   

    function goToPage(table, page, pagination)
    {
        var previous = parseInt(page)-1;
        var next = parseInt(page)+1;
        $(table).find('.table-pagination-overview').html(page);
        var page = parseInt(page)-1;
        var start = page*pagination;
        var end = start+pagination;
        $(table).find('tbody tr').hide().slice(start, end).show();
        checkLinks(table, page, $(table).find('.table-pagination-total').html());
        $(table).find('.table-pagination-link-previous').attr('href', previous);
        $(table).find('.table-pagination-link-next').attr('href', next);
        return false;
    }

    function checkLinks(table, currentLink, totalPages)
    {
        if(currentLink == 0)
        {
            $(table).find('.table-pagination-link-previous').hide();
            $(table).find('.table-pagination-link-first').hide();
            $(table).find('.table-pagination-link-next').show();
            $(table).find('.table-pagination-link-last').show();
        }
        else if(currentLink == (totalPages-1))
        {
            $(table).find('.table-pagination-link-next').hide();
            $(table).find('.table-pagination-link-last').hide();
            $(table).find('.table-pagination-link-previous').show();
            $(table).find('.table-pagination-link-first').show();
        }
        else
        {
            $(table).find('.table-pagination-link-previous').show();
            $(table).find('.table-pagination-link-first').show();
            $(table).find('.table-pagination-link-next').show();
            $(table).find('.table-pagination-link-last').show();
        }
    }
})(jQuery);

Call function: $('.data-table').tableSorterTwo({pagination: 15})

I also have an jsfiddle in which I’m working: http://jsfiddle.net/Tra9N/15/

Not the purpose of this question, but if anybody has improvements or tips for me about the plugin, please share them. It is still not finished and my first jquery plugin so any tips are appreciated!

Answer 1

In your jsfiddle example the change page event is firing twice for each click, which is causing the back button to skip back two pages instead of one.

It looks like this is happening because you have two tables in your example and your code wires up the click event to every .table-pagination-link link in each loop. You can fix this by limiting your scope to the current table. So replace:

$('.table-pagination-link').click(function()

With this:

$('.table-pagination-link', this).click(function()

Working jsFiddle example.