Сортировка HTML-таблицы

Материал из Lblss.ru
Перейти к: навигация, поиск

Понадобилось сделать сортировку HTML-таблички по значениям ячеек столбца без перезагрузки страницы. Довольно быстро был найден скрипт для такой сортировки. Однако, содержимое ячеек таблицы в моем случае оказалось разным - где текст, где селекты... Ну и заголовки оформлены тегом <th>. В связи с вышеозначенным скрипт был слегка доработан.

Теперь он не чувствителен к оформлению строки заголовка - нет разницы, используется ли <th> или <td> (главное, чтоб они были одинаковы) и наличие или отсутствие тэга <tbody> или <thead>.

Код скрипта

В этом коде читывается тип содержимого ячеек сортируемой таблички. На данный момент допустимы <input type="text"> и <select> Необходимо заметить, что в HTML-коде таблицы между тэгами <td><select> не должно быть пробела или перевода строки, иначе для сортировки будет выбран не тот элемент (пробел или перевод строки является текстом).

/**
Сортировка строк HTML-таблицы.
Код изначально взят отсюда:
http://www.easywebscripts.net/javascript/tsort.php
а затем обработан напильником.
 
Входной аргумент - ячейка-заголовок сортируемого столбца (объект).
 
Пример использования:
<table><thead>
  <tr>
    <th onclick="tSort(this);" title="Кликнуть для сортировки">Название ПО</th>
    <th onclick="tSort(this);" title="Кликнуть для сортировки">Статус</th>
 
*/
 
function tSort(el) {
    var col_sort = el.innerHTML;
    var tn = el.tagName; // таки предположим, что все ячейки заголовка оформлены одинаковым тэгом
    var tr = el.parentNode; // строка заголовка таблицы
    var table = tr.parentNode; // row -> table (без <thead> или <tbody>)
    if(table.tagName != 'TABLE') table = tr.parentNode.parentNode; // row -> thead -> table
    if(table.tagName != 'TABLE') return false; // ну тогда я не знаю.....
    var td, arrow, col_sort_num, tdObj, val;
 
    // вычисление и отметка заголовка сортируемого столбца
    for (var i=0; (td = tr.getElementsByTagName(tn).item(i)); i++) {
        if (td.innerHTML == col_sort) {
            col_sort_num = i;
            if (td.prevsort == "y") {
                arrow = td.firstChild;
                el.up = Number(!el.up);
            }
            else {
                td.prevsort = "y";
                arrow = td.insertBefore(document.createElement("span"), td.firstChild);
                el.up = 0;
            }
//            arrow.innerHTML = el.up ? "&#9653; ":"&#9663; "; // стрелочки (жирненькие, но козявят в ИЕ)
            arrow.innerHTML = el.up ? "&#8593; ":"&#8595; "; // стрелочки
            arrow.style.color = 'brown'; // цвет
            arrow.style.fontSize = '120%'; // размер, покрупнее
        }
        else {
            if (td.prevsort == "y") {
                td.prevsort = "n";
                if (td.firstChild) td.removeChild(td.firstChild);
            }
        }
    }
 
    // Сборка массива для сортировки.
    var a = new Array();
    for(var i=1, l=table.rows.length; i<l; i++) {
        a[i-1] = new Array();
        tdObj = table.rows[i].getElementsByTagName("td").item(col_sort_num);
        // вытаскиваем значение в зависимости от типа содержимого ячейки
        switch(tdObj.firstChild.nodeName) {
            case "INPUT": {val = tdObj.firstChild.value; break;}
            case "#text": {val = tdObj.innerHTML; break}
            case "SELECT": {val = tdObj.firstChild.options[tdObj.firstChild.selectedIndex].text; break}
        }
        a[i-1][0] = val.toLowerCase();  // значение для сортировки
        a[i-1][1] = table.rows[i];      // строка таблицы (как объект)
    }
    // сортировка и вывод
    a.sort();
    if(el.up) a.reverse();
    for(var i=0, l=a.length; i<l; i++) table.appendChild(a[i][1]);
    return true;
}

Более хитрые сортировки

Вариант для регистронезависимой сортировки по тексту ссылок, дате/времени вида 19:01 10.01.2010 (с пробелом) и тексту вида 1`280`616 (размер файла, например)

        // вытаскиваем значение в зависимости от типа содержимого ячейки
        switch(tdObj.firstChild.nodeName) {
            case "A": {
              val = tdObj.firstChild.innerHTML;
              val = val.toLowerCase();
              break;
            }
            case "#text": {
              val = tdObj.innerHTML;
              if(val.indexOf(" ") >= 0) { // ячейка с датой
                val = val.substr(12,4) + val.substr(9,2) + val.substr(6,2) + val.substr(0,2) + val.substr(3,2);
              }
              else { // размер файла
                val = "0000000000000000000" + val.replace(/`/, "");
                val = val.substr(val.length-14);
              }
              break;
            }
        }
Персональные инструменты