сортировка 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]);
}

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

Нужно добавлять проверку на тип данных. Что-то вроде того: 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]); }

Огурец 10.06.09 14:44

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

рабочий код 1 часть 01.04.10 12:42

рабочий код 2 часть 01.04.10 12:43

ЁжЁж 11.04.10 18:51

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

anonymous 18.06.10 14:47

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

Дядя Миша 11.12.10 12:37

Всё классно! Но у меня ещё лучше: быстрее, и работает с вложенными в ячейки тэгами! (http://ir2.ru/sorters/SimpleTableSorter.zip)

noname 11.06.11 03:07

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

Alex 02.11.11 13:18

дядя Миша прав, у него _гораздо_ лучше.

qpayct 06.02.12 18:43

Дяди Мишин - фуфло, а этот ещё хуже!

Если вам помогла или просто понравилась эта статья вы можете отблагодарить автора кликнув по рекламе. Спасибо!

комментировать:

прежде чем писать комментарий убедитесь, пожалуйста, что он не попадает в нижеследующие категории:

не стоит писать "я чайник, помогите ..." или "я начинающий, объясните ..." - уважайте себя! может вы и новичок, но ведь не тупой же! сами вполне способны во всем разобраться, тем более, что материал здесь изложен весьма доступно
не пишите вопросы типа "как мне сделать такую же менюху как наверху?", "куда вставлять этот код?", "как устроен интернет?" и т.д. - уважайте время автора!
комментарии вида "все, что здесь написано - бред" будут оставлены только если будут подписаны "я такой-то, разработчик сайта такого-то с посещаемостью 1000 хостов в день" и т.п. Если вы не согласны с чем-то - обоснуйте, напишите как правильно, а писать простые ругательства не надо, это не забор

прямые оскорбления кого бы то ни было будут удалятся!
здоровая критика приветствуется!

от кого:

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

Комментарии: