Сортиране на таблица с помощта на JavaScript

Понякога неизбежно възниква въпросът пред всеки съвестен уебмастър: защо да претоварвате HTML страницата, когато сортирате таблица? Не е ли възможно да пренаредите елементите на HTML таблицата направо в браузъра, без скриптове от страна на сървъра, като използвате само Javascript? Решението на проблема и описанието на решението са еднакво интересни в този случай. Докато въпросът привлече вниманието ни, ние изхождахме от следните предпоставки:

След като започнахме подробно разследване, на първо място открихме предполагаемия ресурс; оказа се форумът на torrents.ru. Това обаче не ни донесе нищо утешително: той използва колосален плъгин от tablesorter.com, за да сортира таблицата до чудовищната 200-килобайтна „рамка“ на jQuery в различни браузъри на място).

Не, това не е нашият път, той противоречи на втората предпоставка. Нормалният код трябва да е кратък и ясен, лесен за разбиране. Освен това няма „разтегливост“ (кой трябва да се задълбочи в тези чудовища?). Например, доста бързо се натъквате на следното неудобство при сортиране на таблици в torrents.ru: когато се върнете на страница с таблица, сортирана по-рано по javascript, таблицата се отваря в оригиналната си форма. Как да "поправя" състоянието на сортиране на страницата? Това може да се направи с помощта на бисквитка (за която наскоро писахме в статията за запазване на потребителските настройки), но къде след това в този сортиращ jQuery, за да запишете запазените параметри?

Стигнахме до Яндугл - проверете четвъртия колет; също няма нищо утешително. На първо място са не много правилни решения, а две повече или по-малко заинтересовани от нас - на сайтовете usa.org.ua и HTMLcoder.visions.ru - се оказаха „заети“ от буржоазията - от сайтовете www. leigeber.com/2009/03/table -sorter/и idontsmoke.co.uk съответно. Решенията за бегло запознанство изглеждаха добри, но все пак прекалено сложни; и е малко обидно за държавата.

Надяваме се, че нашият скрипт за сортиране на таблици в HTML ще бъде по-кратък и по-добър и описанието му ще бъде по-ясно. Тук, между другото, той самият - tabsort.js и ето резултатът от неговата работа:

Изложение на общ проблем (приблизителен алгоритъм)

Заглавна линия. Не всички редове на таблицата трябва да бъдат сортирани, първият ред трябва да бъде със заглавки, които остават на място. Сортирането трябва да се извърши чрез щракване върху заглавката на колоната; следователно курсорът в заглавната лента трябва да е указател. Когато кликнете върху същото заглавие отново, сортирайте в обратен ред.
Какво точно да сортирате? Използвайки DOM-Javascript е лесно да получите HTML колекция от елементи, включително редове на таблици. Но как да сортираме тези елементи (които в представяне на Javascript са обекти и в примитивното си значение всички изглеждат еднакво - като HTMLRowElement)?
Очевидно е, че можете само да сортирате текст, които могат да бъдат достъпни по два (приблизително) начина: чрез свойството innerHTML и чрез nodeValue на текстовите възли.
Като първо приближение: получаваме редовете на таблицата, innerHTML за всеки - и сортираме. Това прави възможно сортирането по първата колона. Как да сортирам по други?
Видяхме две възможности: 1) сортиране на елементите на избраната колона и след това привеждане на реда на редовете в съответствие с получените нови индекси; 2) сортирайте редовете наведнъж - използвайки персонализирана функция, която ще сравнява текстовете на елементите на колоната "щракване".
Имаше и допълнителна задача - да сравним скоростта на опциите и да изберем най-добрата.

Заглавия. "Раирана" маса.

Следвайки добрата практика на ненатрапчив javascript, ние свързваме някои събития с обекти не в HTML кода, а в скрипта, разположен в края на страницата. В този случай обектът е таблица. Може би не една таблица на страница. И може би не всички таблици, а избрани. Решихме да ги изберем по един атрибут: class = "sortable". Ако елементът маса има такъв атрибут, таблицата ще бъде свързана с желаното събитие за сортиране.

Опитът да се получат свойствата на обект (или елементи от HTML колекция) чрез метода for (var el in obj), не на теория, а в определен браузър (нека не сочим пръст), понякога дава странни резултати. Това обяснява нашите презастрахователни проверки: дали възелът е елемент (nodeType 1) и дори дали има tagName "TABLE" (не getElementsByTagName ("TABLE") влиза там нещо друго!). Трудно ни е да дадем рационални причини за поведението си в този случай, но „работи“ и без „това“ имахме проблеми някъде някъде.

Присвояването на събитие onclick = clicktab на избрани таблици отнема първите 6 реда от кода „задействане“. Следващите 6 реда са посветени на бойната боя на масите в редуващи се черни и бели ивици. Както и да е, планирахме да го опишем веднъж, защо да не спестим място и да го направим едновременно. Да-да. И защо не едновременно („Остап е пренесен“) да програмира „акцента“ на редовете на таблицата, когато мишката се премести над тях? Това отнема още 12 реда: