Jquery表分页仅适用于具有多个实例的最后一个表

时间:2012-05-24 11:38:16

标签: jquery jquery-plugins pagination html-table

我正在构建一个表格分类器和分页脚本。排序工作正常,最后一个表上的分页也可以作为魅力。所有以前的表都打破了分页的上一个和下一个按钮。有人可以告诉我为什么吗?

这是jquery插件:

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

通话功能:$('.data-table').tableSorterTwo({pagination: 15})

我也有一个jsfiddle我正在工作:http://jsfiddle.net/Tra9N/15/

不是这个问题的目的,但如果有人对我有关于插件的改进或提示,请分享。它仍然没有完成,我的第一个jquery插件,所以任何提示都很感激!

1 个答案:

答案 0 :(得分:0)

在你的jsfiddle示例中,更改页面事件每次单击都会触发两次,这会导致后退按钮跳回两页而不是一页。

看起来这种情况正在发生,因为您的示例中有两个表,并且您的代码将click事件连接到每个循环中的每个.table-pagination-link链接。您可以通过将范围限制为当前表来解决此问题。所以替换:

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

有了这个:

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

Working jsFiddle example