Шаг 125.
Библиотека jQuery. Работа с таблицами. Сортировка и разбивка на страницы. Сортировка с помощью JavaScript. Выделение столбца

    На этом шаге мы рассмотрим решение задачи выделения последнего столбца, по которому была выполнена сортировка.

    Полезным расширением пользовательского интерфейса может быть возможность напоминания пользователю о последней выполненной операции. Выделение столбца, по которому была выполнена сортировка, может помочь пользователю сосредоточить внимание на той части таблицы, которая наиболее вероятно имеет отношение к делу. Благодаря тому что мы уже определили, как выделять ячейки в столбцах таблицы, все сводится к применению к ним соответствующего класса CSS:

   $table.find('td').removeClass('sorted')
     .filter(':nth-child(' + (column + 1) + ')')
     .addClass('sorted');
   });

    Данный фрагмент сначала удаляет класс sorted из всех ячеек, а затем добавляет его только к ячейкам столбца, по которому только что была выполнена сортировка. Обратите внимание, что индекс столбца, определенный ранее, мы увеличили на 1; это обусловлено тем, что селектор :nth-child() начинает отсчет элементов не с нуля, а с единицы. Добавив этот программный код, мы обеспечим выделение столбца после любой операции сортировки, как показано на рисунке 1.

Рис.1. Выделение столбца после любой операции сортировки

Полный текст этого примера можно взять здесь.

    На следующем шаге мы рассмотрим изменение направления сортировки.




Предыдущий шаг Содержание Следующий шаг