Сортировка html таблицы средствами JavaScript

Задача сортировки строк таблицы встречается довольно часто и ее можно решить без раздражающей перезагрузки страницы.
Почему-то некоторые склонны относить данное решение к AJAX, но это далеко не всегда так. При небольших объемах таблицы (а это, как показывает практика, 90% случаев) достаточно штатных средств JavaScript. Это означает, что сортировка будет производиться на клиентской машине, поэтому размер таблицы прямо пропорционален загрузке ЦП пользователя. Таким образом, если таблица содержит более 50 строк, рекомендуется обратиться к другим способам сортировки, одним из которых, безусловно, является использование технологии AJAX.

Пример (для сортировки нажмите на заголовок колонки):

Свойства интерфейса Node

Свойство Изменяемое Модель Описание
attributes Нет DOM 1 Атрибуты узла.
childNodes Нет DOM 1 Список детей.
firstChild Нет DOM 1 Первый ребенок.
lastChild Нет DOM 1 Последний ребенок.
localName Нет DOM 2 Локальное имя в пространстве имен.
namespaceURI Нет DOM 2 URI пространства имен.
nextSibling Нет DOM 1 Следующий узел дерева.
nodeName Нет DOM 1 Имя узла.
nodeType Нет DOM 1 Тип узла.
nodeValue Да DOM 1 Значение узла.
ownerDocument Нет DOM 1 Документ — владелец узла.
parentNode Нет DOM 1 Отец данного узла.
prefix Да DOM 2 Префикс пространства имен.
previousSibling Нет DOM 1 Предыдущий узел дерева.

HTML:

<table class="spc" border="0" cellspacing="2" cellpadding="2" width="98%">
          <tr>
            <td class="thd" onclick="sort(this)" title="Нажмите на заголовок, чтобы отсортировать колонку">Свойство</td>
            <td class="thd" onclick="sort(this)" title="Нажмите на заголовок, чтобы отсортировать колонку">Изменяемое</td>
            <td class="thd" title="Нажмите на заголовок, чтобы отсортировать колонку">Модель</td>
            <td class="thd" onclick="sort(this)" title="Нажмите на заголовок, чтобы отсортировать колонку">Описание</td>
          </tr>
          <tr>
            <td>attributes</td>
            <td>Нет</td>
            <td>DOM 1</td>
            <td>Атрибуты узла.</td>
          </tr>
          ...
</table>

JavaScript:

function sort(el) {
   var col_sort = el.innerHTML;
   var tr = el.parentNode;
   var table = tr.parentNode;
   var td, arrow, col_sort_num;

	for (var i=0; (td = tr.getElementsByTagName("td").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?"↑ ":"↓ ";
        }else{
            if (td.prevsort == "y"){
                td.prevsort = "n";
                if (td.firstChild) td.removeChild(td.firstChild);
            }
        }
    }

	 var a = new Array();

    for(i=1; i < table.rows.length; i++) {
	 	a[i-1] = new Array();
	 	a[i-1][0]=table.rows[i].getElementsByTagName("td").item(col_sort_num).innerHTML;
		a[i-1][1]=table.rows[i];
	 }

	 a.sort();
	 if(el.up) a.reverse();

	 for(i=0; i < a.length; i++)
	 table.appendChild(a[i][1]);
}

Следует отметить, что данный скрипт будет работать только с простым содержанием ячеек таблицы (без вложенных тегов).

14 Комментарии “Сортировка html таблицы средствами JavaScript

  1. Сортирует в таком порядке
    1
    10
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    11
    110
    111
    итд

  2. Нужно добавлять проверку на тип данных. Что-то вроде того:

    function sortitasc(a,b){
    return(a[0]-b[0]);
    }

    function sortitdesc(a,b){
    return(b[0]-a[0]);
    }

    function IsNumeric(sText)

    {
    var ValidChars = "0123456789.";
    var IsNumber=true;
    var Char;

    for (i = 0; i < sText.length && IsNumber == true; i++)
    {
    Char = sText.charAt(i);
    if (ValidChars.indexOf(Char) == -1)
    {
    IsNumber = false;
    }
    }
    return IsNumber;

    }

    function sort(el)
    {
    ………….

    if (IsNumeric(a[0][0]))
    {
    if (el.up) {a.sort(sortitasc);}
    else {a.sort(sortitdesc);}
    }
    else
    {
    a.sort();
    if(el.up) a.reverse();
    }

    for(i=0; i < a.length; i++)
    table.appendChild(a[i][1]);

    }

  3. Огромное спасибо!!!!!!!! Изложено доступно и понятно. Очень помогло

  4. function sortitasc(a,b) { return(a[0]-b[0]); } function sortitdesc(a,b) { return(b[0]-a[0]); } function IsNumeric(sText) { var ValidChars = '0123456789.'; var IsNumber=true; var Char; for (i = 0; i < sText.length && IsNumber == true; i++) { Char = sText.charAt(i); if (ValidChars.indexOf(Char) == -1) { IsNumber = false; } } return IsNumber; }

  5. function sort(el) { var col_sort = el.innerHTML; var tr = el.parentNode; var table = tr.parentNode; var td, arrow, col_sort_num; for (var i=0; (td = tr.getElementsByTagName("td").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?"&#8593; ":"&#8595; "; }else{ if (td.prevsort == "y"){ td.prevsort = "n"; if (td.firstChild) td.removeChild(td.firstChild); } } }

  6. Спасибо большое. А можно сюда что-нибудь добавить, чтобы строки имели поочередную раскраску "зебру", даже после сортировки?

  7. все кул, но 2 вопроса: как сделать сортировку 1,2,3,4,5,6,7,8,9,10,11…..? и возможна ли такая сортировка по умолчанию, а не по клику?

  8. Если честно, уже 3 раз начинаю искать нужный JS скрипт, и каждый раз ваш вариант превосходит в разы то что я находил где либо )) Так держать !

  9. Добрый день! Подскажите пожалуйста — а можно ли это использовать в бесплатном конструкторе сайтов типа okis.ru, если у меня доступ только к закачке файлов на сайт и html разметке страницы? Куда помещать javascript??? СПАСИБО!

  10. Кстати! если есть проблема с сортировкой такого типа 1,2,12,14,34. Т.Е при сортировке такого массива получится 1, 12, 14, 2 Можно решить так var sortData = "данные по сортировке"; if( typeof sortData == "number" ){ sortData = sortData/1000000; } и вот это число sortData уже записать в массив который будет сортироваться. и будет вам счастье =)

  11. Спасибо. В всех виденных мною реализаций сортировки заголовок скроллируется вместе с таблицей, т.о. с экрана исчезают названя столбцов, а для изменения сортировки приходится возвращать заголовок. Хотелось бы, чтобы заголовок оставался при скроллировании на экране. ps: сообщение от "qpayct" противоречит последнему в Ваших комментаниях правилу.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *