Сортировка таблицы на javascript без зависимостей за 10 минут
Задача сортировки строк таблицы встречается довольно часто и, если таблица не слишком большая (а это, как показывает практика, 90% случаев), ее можно запросто решить без перезагрузки страницы. Почему-то некоторые склонны относить данное решение к AJAX, но это далеко не всегда так. Обычно даже не нужен никакой фреймворк - достаточно штатных средств JavaScript. Удобство данного подхода состоит в том, что мы не напрягаем сервер лишними запросами, т.к. сортировка javascript'ом будет производиться на клиентской машине, но при этом размер таблицы прямо пропорционален загрузке ЦП пользователя, однако при современных мощностях ПК этот факт весьма малозначителен.
В данной статье я рассмотрю самый наипростейший скрипт сортировки, который при желании без труда можно подогнать под свои нужды добавив оформление и, при необходимости, нарастив функционал.
Пример.
Свойства интерфейса Node (для сортировки нажмите на заголовок колонки)
| Свойство | Изменяемое | Модель | Описание |
|---|---|---|---|
| childNodes | Нет | DOM 1 | Список детей |
| nodeValue | Да | DOM 1 | Значение узла |
| firstChild | Нет | DOM 1 | Первый ребенок |
| attributes | Нет | DOM 1 | Атрибуты узла |
| lastChild | Нет | DOM 1 | Последний ребенок |
| namespaceURI | Нет | DOM 2 | URI пространства имен |
| localName | Нет | DOM 2 | Локальное имя в пространстве имен |
| nextSibling | Нет | DOM 1 | Следующий узел дерева |
| previousSibling | Нет | DOM 1 | Предыдущий узел дерева |
| nodeName | Нет | DOM 1 | Имя узла |
| ownerDocument | Нет | DOM 1 | Документ владелец узла |
| parentNode | Нет | DOM 1 | Отец данного узла |
| prefix | Да | DOM 2 | Префикс пространства имен |
| nodeType | Нет | DOM 1 | Тип узла |
<table> <thead> <tr> <th>Свойство</th> <th>Изменяемое</th> <th>Модель</td> <th>Описание</th> </tr> </thead> <tbody> <tr> <td>attributes</td> <td>Нет</td> <td>DOM 1</td> <td>Атрибуты узла.</td> </tr> ... </tbody> </table>JavaScript:
Следует отметить, что данный скрипт будет работать только с простым содержанием ячеек таблицы (без вложенных тегов). Также все столбцы будут сортироваться как строковые значения (так работает встроенная функция сортировки массивов в javascript). Тем, кому необходим более серьезный функционал, рекомендую обратиться к плагинам jQuery, которых на просторах интернета можно найти в избытке, либо доработать данный скрипт под свои нужды.
Всем добра!
Сортирует в таком порядке
1
10
100
101
102
103
104
105
106
107
108
109
11
110
111
итд
Нужно добавлять проверку на тип данных. Что-то вроде того:
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]);
}
}
Огромное спасибо!!!!!!!!
Изложено доступно и понятно.
Очень помогло
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)
{
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);
}
}
}
все кул, но 2 вопроса: как сделать сортировку 1,2,3,4,5,6,7,8,9,10,11.....?
и возможна ли такая сортировка по умолчанию, а не по клику?
Если честно, уже 3 раз начинаю искать нужный JS скрипт, и каждый раз ваш вариант превосходит в разы то что я находил где либо ))
Так держать!
Кстати! если есть проблема с сортировкой такого типа 1,2,12,14,34.
Т.Е при сортировке такого массива получится 1, 12, 14, 2
Можно решить так:
var sortData = "данные по сортировке";
if( typeof sortData == "number" ){
sortData = sortData/1000000;
}
и вот это число sortData уже записать в массив который будет сортироваться.
и будет вам счастье =)
спасибо
Спасибо.
В всех виденных мною реализаций сортировки заголовок скроллируется вместе с таблицей, т.о. с экрана исчезают названя столбцов, а для изменения сортировки приходится возвращать заголовок. Хотелось бы, чтобы заголовок оставался при скроллировании на экране.