Форум dkLab и Denwer
Здесь общаются Web-разработчики.
Генеральный спонсор:
Хостинг «Джино»

Сортировка и отбор данных в большой HTML-таблице (Михаил Гутентог)
Author Message
Михаил Гутентог
Заглянувший



Joined: 11 Dec 2010
Posts: 16
Карма: 7
   поощрить/наказать

Location: Иркутск

PostPosted: Wed Jan 05, 2011 5:24 pm (написано за 8 минут 19 секунд)
   Post subject: Сортировка и отбор данных в большой HTML-таблице
Reply with quote

Не имеющий аналогов скрипт для сортировки и отбора данных в браузере. Незаменим для сайтов Веб 0.5 ("полувеб" или Веб/2, "веб пополам" - не путать с "веб-два-ноль"!). Может быть полезен для инструментов веб-разработчика, таких как HTTP файл менеджер (чтобы не гадать, на 15-й странице начинаются файлы на букву 't' или на 18-й):



"Big Table Sorter" можно перевести как "Большой сортировщик таблиц", так и "Сортировщик больших таблиц". И то и другое верно. Он большой, потому что много всего умеет, и он может очень быстро (быстрее, чем MySQL => PHP => HTTP) сортировать таблицы размером больше 10000 строк.

Версия 1 - базовая, в ней возможности Сортировщика ограничены, но всё равно вполне достаточны для промышенного применения. Вот эти возможности:

1) Постраничный вывод таблицы; навигация с помощью кнопок и стрелок (Ctrl [+ Alt] + Right [Left] Arrow).

2) Ускоренный вывод на экран при первоначальной загрузке страницы (выводится только первая страница таблицы).

3) Сортировка строк и положительных чисел (включая деньги) с высокой скоростью (практически мгновенная).

4) Фильтрация данных из столбца таблицы с помощью поля ввода в ячейке заголовка.

5) Фильтрация и сортировка по нескольким столбцам (результаты предыдущего действия сохраняются).

6) Произвольное изменение размера страницы (количества строк) пользователем.

7) Стрелки, указывающие направление сортировки, могут быть графическими и рисованными на CSS, по выбору веб-мастера (по умолчанию - на CSS, значение "arrows_draw: true" в начале файла tabtools1.js).

Этого достаточно для вывода на одной HTML-странице телефонного справочника предприятий среднего российского города (и для быстрого нахождения на такой странице требуемых данных). Пример на рабочем сайте - страница vostsibspravka.ru/listfirm.htm, около 8000 предприятий, 1.3 МБ (скачивается 0.3 МБ благодаря gz-компрессии).

Подключение:

1) Нужно добавить к HEAD HTML-страницы следующий код:
Code (html): скопировать код в буфер обмена
<link (december.com/html/4/element/link.html) rel='stylesheet' href='classes.css' type='text/css'> (december.com/html/4/element/.html)
<link (december.com/html/4/element/link.html) rel='stylesheet' href='tabsort1.css' type='text/css'> (december.com/html/4/element/.html)
<script (december.com/html/4/element/script.html) type='text/javascript' src='tabtools1.js'> (december.com/html/4/element/.html)</script>
<script (december.com/html/4/element/script.html) type='text/javascript' src='tabsort1.js'> (december.com/html/4/element/.html)</script>
2) К атрибуту "class" сортируемых таблиц нужно добавить селектор "sortable" (<table class="sortable">).

3) В сортируемой таблице должен быть явно обозначен элемент THEAD; в нём должна быть одна строка заголовка TR (может быть и больше, но Сортировщик будет работать с первой). В первой (рабочей) строке заголовка не должно быть объединения ячеек.

4) У ячейки заголовка должен быть атрибут AXIS со значением - типом сортировки (сейчас поддерживается два типа: "num" и "str"): <th axis="num">. Если у заголовочной ячейки не будет подходящего значения AXIS, колонка сортироваться не будет (и нельзя будет отбирать по ней данные).

5) В сортируемой таблице не обязательно обозначать явно TBODY, но если он обозначен явно, то должен быть только один.

Благодарности

Идея графических стрелок позаимствована у Ильи Лебедева (debugger.ru/blog/bystraja_sortirovka_tablic.

Правильное направление работе над кэшированием задал Michael Leigeber (leigeber.com (leigeber.com/)).

Дистрибутив:


BigTableSorter1.01.zip
 Description:
Big Table Sorter, версия 1.01

Download
 Filename:  BigTableSorter1.01.zip
 Filesize:  57.83 KB
 Downloaded:  864 Time(s)



Last edited by Михаил Гутентог on Thu Sep 08, 2011 7:33 am; edited 2 times in total
Back to top
View user's profile Send private message Send e-mail
Михаил Гутентог
Заглянувший



Joined: 11 Dec 2010
Posts: 16
Карма: 7
   поощрить/наказать

Location: Иркутск

PostPosted: Tue Sep 06, 2011 3:23 pm (спустя 8 месяцев 21 час 59 минут; написано за 1 минуту 12 секунд)
   Post subject: Big Table Sorter, версия 1.01
Reply with quote

Упрощено подключение сортировщика к HTML таблице. Улучшен алгоритм фильтрации и сортировки по нескольким столбцам, добавлены более гибкие настройки, добавлен анализ значений при сортировке и отображение разультатов с помощью изменения фона строк:



Подключение

1), 2) - как в предыдущей версии.

3) Элемент THEAD не обязательно обозначать явно, при отсутствии элемент будет создан и к нему будет присоединена перва строка таблицы;

4) У ячейки заголовка может быть атрибут AXIS со значением - типом сортировки; при отсутствии явного указания типа скрипт будет пытаться определить тип самостоятельно, по алгоритму упрощённой сортировки (как в Simple Table Sorter (forum.dklab.ru/viewtopic.php?t=39124));

5) В атрибут AXIS может быть добавлено (через двоеточие) указание (строка 'alt') на то, что столбец необходимо анализировать (и на основании анализа раскрашивать): <th axis='num:alt'>.

Дополнение

Щелчок по любой ячейке заголовка с удержанной клавишей Ctrl приводит таблицу в исходное состояние (до любой сортировки и фильтрации).

Рабочий пример: ir2.ru/sort1/table2000_1.htm.


BigTableSorter1.01.zip
 Description:
Big Table Sorter, версия 1.01

Download
 Filename:  BigTableSorter1.01.zip
 Filesize:  57.83 KB
 Downloaded:  1325 Time(s)

Back to top
View user's profile Send private message Send e-mail
archer1981
Заглянувший



Joined: 12 Feb 2013
Posts: 1
Карма: 0
   поощрить/наказать


PostPosted: Tue Feb 12, 2013 5:56 pm (спустя 1 год 5 месяцев 6 дней 2 часа 33 минуты; написано за 4 минуты 43 секунды)
   Post subject:
Reply with quote

Приветствую.

Прикрутил к своей админке сей замечательный скрипт. В первую очередь спасибо за адекватную сортировку кириллицы :)

Есть вопросы:

1) Как сделать так, чтобы скрипт НЕ обрабатывал заданные столбцы? Я попробовал подзаточить код, добавил в функцию cCalc вариант "none", но пока не получилось. Покамест работает только замена тэга th на td, в этом случае не выводится поле для поиска. Но стрелки таки рисуются, а надо убрать и их.

2) Как сделать так, чтобы таблица по умолчанию была отсортирована по одному из столбцов? До прикрутки скрипта работала сортировка в mysql-запросе, но сейчас она не действует.
Back to top
View user's profile Send private message
Display posts from previous:   
Post new topic   Reply to topic All times are GMT + 3 Hours
Page 1 of 1    Email to a Friend.
You cannot post new topics in this forum. You cannot reply to topics in this forum. You cannot edit your posts in this forum. You cannot delete your posts in this forum. You cannot vote in polls in this forum. You cannot attach files in this forum. You can download files in this forum.
XML