В процессе работы над сортировщиком (как и над любой другой программой) приходится многократно обращаться к разным вариантам, существующим в виде открытых решений в Сети. И очень уж сильно заел меня TinyTable с сайта leigeber.com. Маленький, ..ка, вёрткий, многофункциональный, и в 10 раз меньше других известных сортировщиков. Вот он, прямо здесь: Tiny sorter.
А вот наш, советский Simple Table Sorter. И как сравнивать? «Наш быстрее, зато у Tiny столбцы в полоску?» Нужна концепция HTML-сортировщика: необходимый минимум функций и возможный максимум.
Эта концепция отличается от концепции Tiny sorter следующими моментами:
Сортировка по нескольким колонкам: как должна вести себя программа? Если отсортировать столбец 1, после этого сортировка столбца 2 должна идти из исходного состояния таблицы, или из результата первой сортировки? Мы (и TinyTable) выбираем последнее. Ну, и не надо нажимать Shift для сортировки по нескольким столбцам – это для слишком умных пользователей, настолько умные пользователи и так сообразят, как это сделать. Вот, например, таблица городов, надо последовательно отсортировать её по всем трём колонкам – части света, страны, города.
| Часть света | Страна | Город | Деньги |
|---|---|---|---|
| Европа | Франция | Руан | 100 р. |
| Европа | Франция | Париж | 90 р. |
| Европа | Германия | Дрезден | 91р. |
| Европа | Германия | Берлин | 10 р. |
| Азия | Китай | Шанхай | 1.1 р. |
| Азия | Китай | Пекин | 2.03 р. |
| Азия | Индия | Бомбей | 22.5р. |
| Азия | Индия | Дели | 22.4 р. |
Ну и щёлкайте последовательно по всем трём столбцам, только в обратном порядке: Город, Страна, Часть света – таблица окажется отсортированной, как нужно.
Надеемся, что для нашего Простого Сортировщика достигнута предельная простота подключения:
Подключать TinyTable сложнее: кроме перечисленных действий нужно ещё вписать в конец HTML-страницы скрипт с инструкцией, инициирующей создание объекта table.sorter и запускающую функцию подготовки таблицы с параметром – ID элемента TABLE. Да. А если с ID что-нибудь напутаешь, выйдет ошибка.
У нас круче: ко всем таблицам с класснейм sortable сортировщик «цепляется» сам; а если надо после згрузки страницы подключить сортировщик к динамически созданной таблице, это можно сделать, добавив с новой таблице атрибут className = 'sortable' и вызвав функцию prepTabs с параметром – ссылкой на новый элемент – таблицу, примерно так:
Наш javascript-код сортировки HTML-таблиц так прост, что об этом даже и говорить смешно. Две функции, 57 строк. И куча технологических хитростей. Вот некоторые из них.
Наш скрипт не быстрее TinyTable или jquery.sorter – может быть, на доли секунды медленнее. Но он рассчитан на таблицу в 100-200 строк; при таких объёмах разница в скорости не играет роли (её трудно заметить).
Oleg, ну, например, можно в цикле серверного скрипта, выводящего таблицу, поставить счётчик $i, увеличивающийся для каждой строки на единицу, и если $i % 2 (нечётное), добавлять тэгу tr className: <tr class="odd">
Ну насчет желания дизайнера тут не поспоришь. Я просто высказал некие усредненные ожидания (на мой взгляд) конечного пользователя от том, как он желает "видеть" таблицу. А вот за ссылку о том, где почитать, как присылать зебру готовой с сервера или на работающий скрипт был бы весьма признателен.
Самый лучший скрипт из тех, что удалось найти для сортировки небольших таблиц. Только вот отказ от "зебры" в пользу подсветки строки, на мой взгляд, на таблицах малого размера (до 50 строк) сомнителен. Обычно такие таблицы "просматривают глазами", а не "проводят по ним пальцем", и "зебра" в этом случае была бы более кстати.
==============================================
Oleg, наверное, вы правы, и зебра чаще всё-таки нужна (например, на Сапе зебра есть у любого размера таблиц). Но это больше вопрос общего дизайна, проектирования. Я на каждом конкретном сайте делаю, как прикажет дизайнер...
И кстати, зебру можно присылать уже готовой с сервера, она может быть вполне независимой от js.
San, в приведённом примере всё сортируется нормально. Поле datrec там – обычная строка.
Файл tabsort0.js, кстати, надо вам надо перекодировать (страница в windows-1251, а скрипт сейчас в utf-8)
Возможно не ново, у скрипта версии 0.1 замечена неправильная сортировка по дате... http://ais.san.org.ua/search/0.1/limit200.htm – модифицированный пример, поле "datrec".
Доброго времени суток. Спасибо большое за скрипт, очень пригодился. Установил, все хорошо. устраивает на все 100. Но возник один вопрос. У меня в таблице, есть две строки(tr), скажем с классом "title". Так вот, подскажите пожалуйста, как сделать так что б при сортировке скрипт не трогал эти строки? что б они оставались на своих местах, а все другое сортировалось. Заранее благодарен.
Игорь, скрипт не может пропускать строки при сортировке. Такую возможность надо добавлять руками. В цикле создания массива для сортировки (начинается со строки for (j; j < l; j++) {) надо добавить условие – в вашем случае проверку на className == 'title', и при истинности этого условия не добавлять строки в массив.
Alexander, для поля типа ip нужен отдельный обработчик, у меня его нет. Очевидно, что такой тип данных нельзя сортировать просто как строку или как число.
VILor, версия 2.1 - один из экспериментов, я не использую его на практике и не дорабатываю. Рабочие - два направления: 0.01, 0.02, ..., они описываются в этой статье (Simple Table Sorter), и 1.01 (tabsort1_01.aspx, Big Table Sorter). В версии с единицей впереди есть фильтры и постраничный вывод (в этом отличие от версий, начинающихся с нуля). Если в этих версиях что-то не работает, я исправляю. В других - нет.
Неправильно сортирует поле IP (x.x.x.x). Непонятно, кстати, почему.
Создал динамически таблицу, подключил твой скрипт сортировки. Я только начал изучать javascript, если поможешь разобраться будет просто здорово. Проверял IE6,0 и Google Chrome. В версии 2.1 размножается фильтр, на одну таблицу две строки фильтра, если добавлять таблицы на страницу на каждую последующию +1 сторка в фильтре. При этом сортируются стороки, к которым добавляется строка из секции TFOOT html таблицы. При этом одна строка из секции TFOOT остается на месте (сортируется ее дупликат) В версии 1 все хорошо (мне подходит больше из-за наличия страниц), но при добавлении двух таблиц, когда щелкаешь по стрелкам перехода страниц, записи в таблице переходят в той, которая была активной последней, независимо от того в какой таблице пытаемся перелистнуть страницу.
Nekich,
для сортировки русской даты надо установить столбцу тип данных datru (можно в версии http://ir2.ru/static/sort0.03/table404.htm).
А пример с пустыми столбцами надо смотреть, так, заочно сказать что-то трудно.
Лучше указывать точные адреса примеров, а то я не могу понять, о чём речь. И лучше работать с последними примерами, упоминающимися на сайте. Последняя статья о сортировке была – tabsort004.aspx. Предпоследняя, кажется, – tabsort003.aspx
отличный скрипт. спасибо. использую версию 0.01
подметил глюк в первой и в последней версиях(другие не проверял): если кликнуть : 1.по любому столбцу 2.по столбцу слева от кликнутого в 1-ом 3.и опять по 1-ому – отсортирует по порядку 2-го столбца. пробовал обе версии под свою талицу – глючат. самостоятельно не могу найти в чём проблема, но подметил, что таблица на этой странице работает без глюка, а таблица в последнем примере с глюком.
Поставил скрипт и все сортируется, но появился небольшой баг – справа от столбцов появились пустые столбцы, подскажите как с этим бороться?
Ребят, спасайте :D Сортировка на высоте! Но, возникла проблема.. Некорректно сортируются некоторые строки, я думаю из-за двоеточий и знаков "•" в строках, как решить эту проблему ? И ещё, но уже менее важный вопрос, каким способом можно отсортировать дату, вида: "Январь 2012"
Михаил,
Вот, сделал в новой версии предопредлённую сотрировку:
http://ir2.ru/static/sort0.03/table400.htm (пример)
http://ir2.ru/static/sort0.03/SimpleTableSorter0.03.zip (дистрибутив)
В начало файла tabsort0.js добавлена переменная var init = {2:'desc'}. В объект (в фигурных скобках) можно добавлять через запятую пары Индекс:Тип. Индекс – номер столбца (начиная с нуля), тип – 'asc' (прямой порядок) или 'desc' (обратный порядок).
Можно также указывать сортируемый первым столбец прямо в ячейке заголовка, в атрибуте axis: <th axis='num::desc'>
По рекомендации AleXH во все версии Простого сортировщика добавил сброс состояния таблицы (reset) по Ctrl+Click (на заголовчных ячейках).
Все, проблемку решил. Табличку просто нужно подгрузить через appendChild и все заработает как часики.
Твой код просто супер, нигде на просторах инета такого кода нет, везде с какими то недостатками. СПАСИБИЩИЕ тебе ))) Так держать.
По поводу других пожеланий – никого не слушай, кому нужно – тот при желании сам подгонит под себя, колоссальная работа за них уже проделана, пусть не леняться.
А может мне кто нибудь объяснить поподробней как решить мою проблему???
Суть вот в чем: у меня таблица динамически подгружается в index.php из стороннего файла table.php, если я напрямую обращаюсь к table.php, то все гуд, а вот у подгружаемой в index.php – нет, таблица отображается, а сортировки не происходит ((( Как быть???
У Вас написано, что можно цеплять и к динамически созданной таблице, ток вот она у меня создается не в Java, а в php. Помогите плиз
1) Я не знаю, должен ли цвет стрелок оставаться неизменным при многих кликах по одному столбцу. Ну, поскольку мне всё равно, а вам зачем-то надо, сделал по-вашему.
2) Не, скачивать с ifolder мне не понравилось. Если хотите, можно отправлять файлы мне на почту stopkran@inbox.ru. Или на доску объявлений irkutsk.ir2.ru (это не очень обычно, но я не против такого использования сайта).
3) Сделал подсветку столбцов. Насчёт увеличения насыщенности большие сомнения. Это всё-таки фон, буквы могут быть плохо видны на тёмном. Ну, вы правы в том, что каждый это может подправить для себя в CSS, как хочет.
4) В архив обновления пока не добавил, только в "рабочие" файлы http://ir2.ru/static/tabsort0.css, http://ir2.ru/static/tabsort0.js. Да подсветка столбцов идёт в разрез с концепцией "минимализм + скорость". Скорость заметно падает. Конечно же, только в IE, смотрите на примере таблицы в 1000 строк: http://ir2.ru/static/limit1000sort0.htm. То есть в IE в принципе всё это работает медленнее, но, если на моём компьютере (Пентиум, 2.5 ГГц) простая сортировка 1000 строк в IE 9 занимает 1.5-2 секунды, то сортировка с подсветкой столбцов – примерно вдвое больше, а 3-4 секунды – это уже стрёмно, это, по сути, провал концепции.
5) Какой вообще смысл сортировать таблицу в 1000 строк минимальным сортировщиком? Ведь javascript-разбивка на страницы решает проблему скорости даже в IE. И работать с таблицей удобнее (всё равно вы не выведете на один экран все 1000 строк, надо листать в любом случае).
Может есть возможность подсвечивать столбцы по которым выбрана сортировка цветом? Оттенок цвета сделать более насыщенным у отсортированных позже. Желающие изменить оттенки смогут "подкрутить" их в css.
Если мои предложения идут вразрез с позиционированием данной версии сортировщика, то можно эти куски кода в js закомментировать. Тот, кому понадобится данный сервис, сможет их попросту раскомментировать.
Есть желание сортировать этой версией сортировщика таблицу с ~1000 строк.
В общем я так и думал, до написания вопросов я ознакомился с более "продвинутыми" версиями.
В текущей реализации js имеется недочёт – при клике больше одного раза подряд на один и тот же столбец инкрементируется переменная a_color, в то время как в этом случае она должна оставаться неизменной.
Для отображения направления сортировки, я использую вместо стрелок цифры на жёлтом и зелёном фоне http://ifolder.ru/25408081 (sortable.7z, 623B)
Alex, ну, если "в пределах пересекающихся множеств" :-), то 8 картинок вместо десяти – "каприз художника". То есть это демонстрация "открытости" системы: каждый подгоняет её под себя, как хочет (картинок может быть и больше, и меньше). Мои глаза просто не различают уровни темноты дальше "восьмого" оттенка. Гм, а может, там и картинок-то новых нет (8-9-10 повторяются), я уже не помню.
Атрибуту axis="num|str|date" отводится очень большая роль, но у же в следующей жизни Сортировщика – в Big Table Sorter'е (tabsort1.aspx). В текущей версии (Simple Table Sorter) я некоторое время колебался, потом решил оставить определение типов автоматическим, без участия пользователя (здесь все типы сводятся к строковому). В Большом же Сортировщике типы должны быть указаны явно (а то работать не будет).
Насчёт Зебры тоже были колебания: начались они с колоссальных тормозов в старых IE при любых попытках менять оформление "по ходу" сортировки; завершились пониманием того, что Зебра в принципе не очень нужна – важнее "подсветка" при наведении мыши. Подсветка, кажется, работает во всех современных браузерах (на CSS, псевдо-класс hover). "Остатки" Зебры не убрал по той же причине, что и "зачатки" axis'а – кому надо, легко могут добавить для себя Зебру самостоятельно.
Идея текущей версии – скорость и компактность, ничего лишнего. И это только начальный вариант заинтересовавшего меня направления. В статье tabsort1.aspx обосновывается невозможность перехода к более сложному функционалу работы с таблицами без скачка. Ну, и "максимальная" функциональность работы с таблицами реализована сейчас, например, в версии 1.3 (http://ir2.ru/static/BigTableSorter.zip) – там есть и сохранение состояния (в куки), и режим отладки с выводом временных интервалов для каждой операции... Ещё пара статей на этом сайте о возможностях применения функций сортировки и фильтрации HTML-данных: tabular_data_control.aspx, javascript_bd.aspx.
D.M., admin, excellent! :) Работает как в FF 3.6.20, так и в Opera 11.50.
Имхо теперь всё правильно – в пределах пересекающихся множеств сохраняется монотонность убывания, либо возрастания сортировки. Конечное направление сортировки в пределах пересекающихся множеств определяется чётным, либо нечётным количеством столбцов отсортированных в обратном направлении.
До конца не понял следующие моменты: 1. В js в отличие от css, почему-то задействованы только 8 картинок вместо 10: ----------------- if (a_color < 8) a_color++ -----------------
2. Какая роль отведена в скрипте html тегам axis="num|str|date", id="t"? ----------------- var el, th, cs, c, cell, axis, ts = (t && t.className) ? [t] : document.getElementsByTagName("table") -----------------
3. В css зебра заявлена, но не поддержана в js. ----------------- .sortable .even {background-color:#f0f0f0;} .sortable .odd {background-color:#fff;} -----------------
Alex, ещё раз спасибо за тестирование. Версии пока назначать нет смысла, так как замеченное вами – явные баги. То есть это ещё пока даже и не релиз, типа альфа-версия. Вот если после очередных исправлений не найдёте ошибок, можно будет и версию дать, что-нибудь вроде 1.00000001.
Ошибки исправил, в архив добавил. Там дело было в том, что javascript многозначные (после запятой) числа по умолчанию отображает в виде 1.16e-7. Надо было сразу добавить toFixed(), а я поторопился. Величина таблицы тут ни при чём: у меня изначально в тестовом варианте таблица в 200 строк, но там нет пустых значений или повторяющихся в достаточном объёме (чтобы обнаружить проблему).
Ваша таблица для проверки: table150.html (я проверял не по группам, так как не понял, что это такое, а по первому столбцу идентификаторов).
Может в скрипт и css добавить в первую строку комментарии с номерами версий? Речь пойдёт о предыдущем варианте js без миллиарда. Производим сортировку в таблице выше (table.html из table.7z) в FF. Нажимаем: обновить страницу – ID [отсортировано по возрастанию] – Sellers [отсортировано по возрастанию] – Sellers [отсортировано по убыванию]. И тут мы видим, что столбец Sellers отсортирован правильно, но внутри групп Sellers также произведена сортировка, что в корне неверно, так как сортировка внутри групп должна сохраняться неизменной.
D.M., admin, спасибо за оперативность. В zip лежит старый вариант js, я пробовал на новом, но результат отрицательный для таблиц с большим количеством строк. Причём теперь не работает и в FF, в Опере хоть и стало лучше, но недостаточно. Проверял на http://ifolder.ru/25355882 (table.7z 2.18kB)
Alex, я ваш должник. Баги исправлены в архиве (http://ir2.ru/static/SimpleTableSorter.zip), и можно посмотреть в примере http://ir2.ru/static/test-sort0.html.
Где-то ведь я что-то такое видел у конкурентов! Но не обратил в своё время внимания. Оказывается, ИЕ и Опера просто ВООБЩЕ не сортируют одинаковые значения, а хватают их как попало. Для учёта этой особенности пришлось в сортируемом массиве добавить к каждому сортируемому значению его порядковый номер, делённый на миллион (или миллиард?.. – в общем, много-много нулей после запятой, и в конце число).
FF 3.6.20 – палец ошибся ) Таблица: 111 222 331 412 521 632 Код: <table class="sortable"> <thead> <tr><th>A</th><th>B</th><th>C</th></tr> </thead> <tbody> <tr><td>1</td><td>1</td><td>1</td></tr> <tr><td>2</td><td>2</td><td>2</td></tr> <tr><td>3</td><td>3</td><td>1</td></tr> <tr><td>4</td><td>1</td><td>2</td></tr> <tr><td>5</td><td>2</td><td>1</td></tr> <tr><td>6</td><td>3</td><td>2</td></tr> </tbody> </table>
2 D.M., admin Проверялось в FF 3.6.30, Opera 11.50, IE 6.0. Скрипт simple сортирует правильно только в FF. Например входная таблица (ABC заголовки столбцов): A B C 1 1 1 2 2 2 3 3 1 4 1 2 5 2 1 6 3 2 Последовательно кликаем на ABC. FF 3.6.20, результат правильный: A B C 1 1 1 5 2 1 3 3 1 4 1 2 2 2 2 6 3 2 Opera 11.50, результат неправильный: A B C 1 1 1 5 2 1 3 3 1 4 1 2 6 3 2 2 2 2 IE 6.0, результат неправильный: A B C 3 3 1 5 2 1 1 1 1 6 3 2 2 2 2 4 1 2
Может у вас есть вариант скрипта учитывающий косяки IE и Opera?
Огромное спасибо, просто подключается, доступно объяснил человеку, который в скриптах ничего не понимает. css подправил под себя и все .
В общем, причину не нашел, но использовав "китайские хитрости" сделал, как мне надо. Вопрос снят :)
Вы всё правильно поняли. Что-то у меня значит не так... Хотя что может быть не так? Скрипт ведь работает. Я "в трёх соснах заблудился", блин...
Ну, не знаю... Превратил пару городов в примере в ссылки. Вроде, при сортировке ничего не изменилось. Может, я неправильно понимаю проблему? "Сортировки по нескольким колонкам" как таковой ведь нет: просто следующая сортировка происходит на основе текущего (отсортированного) состояния таблицы (а не из исходного состояния).
Недавно заметил, что не работает "Сортировка по нескольким колонкам" – начал читать статью – оказалось, что эта функция предусмотрена и в добавок работает в примере... Это наверное как-то связано с тем, что сортируется не текст, а ссылки?
Посмотрел я наверх, и действительно: удивительно, удивительно... Думаю, причина в Опере (она всегда отличалась своей необычностью). В общем, чудо.
Забыл, версия оперы – 11.01
Александр, спасибо за отзыв!
Этому скрипту позволяет быть "чудесным" именно отсутствие кучи опций (запоминание состояния сортировки, настройка колонок, всякие "зебры" и подсказки...). Если добавить хотя бы одну из них, скрипт усложнится многократно. И такой скрипт есть: http://ir2.ru/static/BigTableSorter.zip
Он менее "чудесный" (код более корявый), но может сохранять состояние сортировки и работает...
Спасибо за чудесный скрипт. А как сделать так, чтобы сортировать таблицу при загрузке по столбцу?
Извентиляюсь)По что то не подумал даже!Вопрос решен файл tabsort0.js сохр в UTF-8)))Запарился
Здраствуйте, установил данный элемент, но теперь у меня как и у http://front-mission.org/publ/front_mission_3/front_mission_3_navyki_po_alfavitu/2-1-0-38 при наведении на заголовок кракозябли. Как мне исправить? Спасибо за данный элемент, очень помог!
Проверка связи
Здравствуйте. Поставил Simple Table Sorter и заметил у себя глюк с последней строкой в опере – после сортировки, последняя строка ВНЕШНЕ не изменяется, но при наведении на неё курсора всё становится нормально. Повторюсь только в опере. Не подскажите в чём причина?
Пример – http://free-iso.org/search/?q=neverhood&t=0