На этом шаге мы рассмотрим реализацию повторного вызова функции окрашивания строк.
В ходе сортировки строк в примере предыдущего шага произошла перестановка строк, вследствие чего нарушилось выделение цветом чередующихся строк.
После сортировки нам требуется вновь произвести выделение цветом чередующихся строк. Для этого можно вынести программный код, выполняющий окрашивание строк таблицы, в отдельную функцию, чтобы ее можно было вызывать по мере необходимости:
$(document).ready(function() {
var alternateRowColors = function($table) {
$('tbody tr:odd', $table)
.removeClass('even').addClass('odd');
$('tbody tr:even', $table)
.removeClass('odd').addClass('even');
};
$('table.sortable').each(function() {
var $table = $(this);
alternateRowColors($table);
$('th', $table).each(function(column) {
var $header = $(this);
if ($header.is('.sort-alpha')) {
$header.addClass('clickable').hover(function() {
$header.addClass('hover');
}, function() {
$header.removeClass('hover');
}).click(function() {
var rows = $table.find('tbody > tr').get();
rows.sort(function(a, b) {
var keyA = $(a).children('td').eq(column).text()
.toUpperCase();
var keyB = $(b).children('td').eq(column).text()
.toUpperCase();
if (keyA < keyB) return -1;
if (keyA > keyB) return 1;
return 0;
});
$.each(rows, function(index, row) {
$table.children('tbody').append(row);
});
alternateRowColors($table);
});
}
});
});
});
Такая реализация повторно выполняет окрашивание строк таблицы, решая нашу проблему, как показано на рисунке 1.
Рис.1. Вид таблицы после повторного окрашивания строк
Полный текст этого примера можно взять здесь.На следующем шаге мы рассмотрим возможности модулей расширения.
