テーブルソーターとページネーションスクリプトを作成しています。並べ替えは正常に機能し、最後のテーブルのページネーションも魅力的です。ページネーションの前と次のボタンは、前のすべてのテーブルで壊れています。誰かが理由を教えてもらえますか?
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">«</a>' +
'<a href="1" class="table-pagination-link table-pagination-link-previous no-active">‹</a>' +
numberLinks +
'<a href="2" class="table-pagination-link table-pagination-link-next no-active">›</a>' +
'<a href="' + totalPages + '" class="table-pagination-link table-pagination-link-last no-active">»</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 プラグインなので、ヒントをいただければ幸いです。