CB's blog

Все мы постоянно встречаемся с табличными данными. Зачастую таблицы состоят из десятков строк, и работать с ними намного удобнее, отсортировав данные. В то же время, большинство из тех сортировок таблиц что мне приходилось видеть сводилась к следующему: после клика по заголовку столбца на сервер посылается запрос с кодом этого заголовка, далее скрипт, выводящий таблицу выбирал данные из БД ORDER BY соответственное поле (например http://forum.ixbt.com/?id=36&sort=topic). Далее все это передавалось пользователю. Цель этой заметки – рассказать о другом методе сортировки таблиц, который базируется на DOM.

Конечно же я не стану брать на себя авторство всего этого метода. Впервые я нашел чтото подобное на сайте kryogenix. Их версия в отличии от некоторых аналогов (довольно неплохих), позволяет максимально безболезненно и просто добавлять сортировку к существующим таблицам, не вставляя ненужные куски ДжаваСкриптов в текст странички. Почему это хорошо, читаем тут.

Использование. Берем скрипт и подключаем его в в head’е страницы:

<script src="sorttable.js"></script>

Далее, для всех таблиц, которые будут сортироваться, ставим класс sortable, и какие id (id должны быть уникальны)

<table class="sortable" id="unique_id">

После этих нехитрых манипуляций все должно работать.

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

Например, если сделать таблицу полосатой таким образом (makeStripe), то после сортировки вполне возможно, что полоски перестанут чередоваться. А исправить эту досадную фичу очень просто: в функции sortables_init добавляем makeStripe (это будет первичная раскраска):

function sortables_init()
{
    ...
    for (ti=0; ti<tbls.length; ti++)
    {
         thisTbl = tbls[ti];
         if (...)
         {
            ts_makeSortable(thisTbl);
            makeStripe(thisTbl);
        }
    }
}

Далее, следует перекрашивать таблицу после каждой сортировки. Для этого в функции ts_resortTable в самом конце вызываем makeStripe:

function ts_resortTable(lnk)
{
    ...
    makeStripe(table);
}

Теперь допустим, что нам нужно, чтобы не все столбцы были сортируемые. Я предлагаю в таком случае для этих столбцов присвоить класс unsort, и внести изменения в функцию ts_makeSortable:

function ts_makeSortable(table)
{
    ...
    for (var i=0; i<firstRow.cells.length; i++)
    {
        var cell = firstRow.cells[i];
        if(cell.className.indexOf("unsort")==-1)
        {
            var txt = ts_getInnerText(cell);
            ...
        }
    }
}

Внимательно посмотрев на скрипт, мы видим, что лвиную долю кода занимают различного рода сортировки: ts_sort_date – для дат, ts_sort_currency – для валюты и т п. Исходя из наших возможностей, мы можем добавлять новые виды сортировок, а исходя из наших желаний удалять существующие. При этом нужно редактировать код функции ts_resortTable. Ясно, что сортировки задаются при помощи сравнений, и если можно чтото сравнивать, значит можно и сортировать. В оригинальной версии еще немного неаккуратно сделана стрелочка, обозначающая направление сортировки, я предпочитаю вообще без нее.

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

Ну и мой пример использования