Шаг 118.
Библиотека jQuery. Работа с таблицами. Сортировка и разбивка на страницы. Использование функции сравнения для сортировки строк таблицы

    На этом шаге мы рассмотрим реализацию простой сортировки.

    Наша первая процедура сортировки выглядит, как показано ниже:

 $(document).ready(function() {
   $('table.sortable').each(function() {
     var $table = $(this);
     $('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);
           });
         });
       }
     });
   });
 });

   

    Первое, на что здесь следует обратить внимание, - это использование метода .each(), который делает итерации явными. Мы могли бы подключить обработчик события click ко всем заголовкам, содержащим класс sort-alpha, простым вызовом $('table.sortable th.sort-alpha').click(), но это не позволило бы нам легко получить важную информацию: индекс столбца, на заголовке которого был выполнен щелчок. Благодаря тому, что метод .each() передает индекс итерации своей функции обратного вызова, мы сможем использовать его позднее для поиска соответствующей ячейки в каждой строке данных.

    Отыскав ячейку в заголовке, мы извлекаем массив всех строк с данными. Это прекрасный пример того, насколько удобно с помощью метода get() выполнять преобразование объекта jQuery в массив узлов дерева DOM; несмотря на то что объекты jQuery во многом напоминают массивы, в них отсутствуют какие-либо свойственные массивам методы, такие как .sort().

    Теперь, когда у нас имеется массив узлов DOM, мы можем отсортировать его, но для этого необходимо написать подходящую функцию сравнения. Нам требуется отсортировать строки в соответствии с текстом, содержащимся в ячейках таблицы, поэтому именно эту информацию и будет рассматривать функция сравнения. Нам известно, какие ячейки необходимо сравнить, потому что мы сохранили индекс столбца в объемлющем вызове метода .each(). Так как сравнение строк в JavaScript выполняется с учетом регистра символов, а нам желательно сделать сортировку нечувствительной к регистру символов, мы приводим все символы к верхнему регистру. Чтобы избежать лишних вычислений, мы сохраняем значения ключей в переменных, сравниваем их и возвращаем положительное или отрицательное число, как оговаривалось выше.

    Выполнив сортировку массива, мы обходим строки в цикле и вставляем их обратно в таблицу. Метод .append() не создает копии узлов, поэтому он не копирует их, а перемещает. Теперь наша таблица отсортирована.

Рис.1. Сортировка таблицы

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

    Этот пример демонстрирует использование приема постепенной деградации, противоположного приему прогрессивного улучшения. В отличие от решений на основе применения технологии AJAX, обсуждавшихся ранее, данное решение не может функционировать без поддержки JavaScript; здесь предполагается, что у нас нет доступа к программному коду на стороне сервера. Так как для обеспечения возможности сортировки нам необходимо наличие поддержки JavaScript, мы производим добавление класса clickable только в программном коде, благодаря чему интерфейс будет указывать на возможность сортировки (за счет использования фонового изображения), только если сценарий имеет возможность работать. В случае отсутствия поддержки JavaScript в браузере функциональность страницы деградирует: страница по-прежнему будет выполнять свои функции, но уже без возможности сортировки.

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




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