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

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



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

Location: Иркутск

PostPosted: Sat Dec 11, 2010 3:40 pm (написано за 9 минут 33 секунды)
   Post subject: Простая сортировка HTML-таблицы
Reply with quote

Очень маленький и простой сортировщик таблиц в браузере, без кэширования, но достаточно быстрый для таблиц в 100-200 строк. Сортирует строки и числа (пример: ir2.ru/sorters/table400.htm). Сортирует несколько разных таблиц на странице. Можно подключать к динамическим таблицам (созданным после загрузки страницы). Для подключения к странице с таблицами нужно:

1) Вписать в HEAD страницы две инструкции:
Code (html): скопировать код в буфер обмена
<link (december.com/html/4/element/link.html) rel='stylesheet' href='tabsort0.css' type='text/css'> (december.com/html/4/element/.html)
<script (december.com/html/4/element/script.html) type='text/javascript' src='tabsort0.js'> (december.com/html/4/element/.html)
2) Добавить сортируемым таблицам атрибут class='sortable'.

3) Ну, и скопировать на сервер файлы tabsort0.css, tabsort0.js и папку img (для стрелок сортировки) из прилагаемого архива Simple Table Sorter.

Для подключения к динамически созданной таблице вызвать функцию prepTabs(t), передав ей в качестве параметра ссылку на HTML-элемент таблицы.

Код занимает всего 70 строк:
Code (JavaScript): скопировать код в буфер обмена
(function(){
       
        var hc = function (s, c) {return (" " + s + " ").indexOf(" " + c + " ") !== -1},
         ac = function (e, c) {var s = e.className; if (!hc(s, c)) e.className += " " + c};
       
        prepTabs = function (t){
                var el, th, ts = (t && t.className) ? [t] : document.getElementsByTagName("table")
                for (var e in ts) {
                        el = ts[e]
                        if (!hc(el.className, "sortable")) continue
                        if (!el.tHead) {
                                th = document.createElement("thead")
                                th.appendChild(el.rows[0])
                                el.appendChild(th)
                        }
                        th = el.tHead
                        ac(th, "c_0_c")
                        th.title = ""
                        th.onclick = clicktab
                        el.sorted = NaN
                        //reset
                        el.tb = el.tBodies[0]
                        el.tb_res = el.tb.cloneNode(true)
                        el.th_res = th.cloneNode(true)
                        el.a_color = 0
                }
        }
       
        var clicktab = function (e) {
                e = e || window.event
                var obj = e.target || e.srcElement;
                while (!obj.tagName.match(/^(th|td)$/i)) obj = obj.parentNode
                var i = obj.cellIndex, t = obj.parentNode, cn = obj.className, verse = /d\_\d+\_d/.test(cn);
                while (!t.tagName.match(/^table$/i)) t = t.parentNode
                var j = 0, rows = t.tb.rows, l = rows.length, c, v, vi;
               
                if (e.ctrlKey) { /* reset */
                        t.replaceChild(t.tb_res, t.tb);
                        t.replaceChild(t.th_res, t.tHead);
                        prepTabs(t);
                        return;
                }
                
                if (i !== t.sorted) {
                        if (t.a_color < 9) t.a_color++
                        else t.a_color = 1
                        t.sarr = []
                        for (j; j < l; j++) {
                                c = rows[j].cells[i]
                                v = (c) ? (c.innerHTML.replace(/\<[^<>]+?\>/g, '')) : ''
                                vi = Math.round(100 * parseFloat(v)).toString()
                                if (isFinite(vi)) while (vi.length < 10) vi = '0' + vi
                                else vi = v
                                t.sarr[j] = [vi + (j/1000000000).toFixed(10), rows[j]]
                                //c.innerHTML = t.sarr[j][0]
                        }
                }
                t.sarr = (verse) ? t.sarr.reverse() : t.sarr.sort()
                t.sorted = i
               
                var dir = (verse) ? "u" : "d", new_cls = dir + "_" + t.a_color + "_" + dir,
                 a_re = /[cdu]\_\d+\_[cdu]/;
                if (a_re.test(cn)) obj.className = cn.replace(a_re, new_cls)
                else obj.className = new_cls
                for (j = 0; j < l; j++) t.tb.appendChild(t.sarr[j][1])
                obj.title = "  " + ((verse) ? "" : "")
        }
        window.onload = prepTabs
})()



SimpleTableSorter.zip
 Description:
Простой сортировщик HTML таблиц, версия 1.01

Download
 Filename:  SimpleTableSorter.zip
 Filesize:  13.52 KB
 Downloaded:  1138 Time(s)



Last edited by Михаил Гутентог on Sat Sep 10, 2011 10:06 am; edited 4 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: Mon Aug 22, 2011 6:56 am (спустя 8 месяцев 10 дней 15 часов 16 минут; написано за 2 минуты 51 секунду)
   Post subject:
Reply with quote

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

Добавил функцию: при Ctrl + Click по заголовку таблица возвращается в первоначальное состояние (reset). Места немного (10 строк), считаю, что эта возможность должна быть в самой начальной версии (поменял код).

Last edited by Михаил Гутентог on Sat Sep 10, 2011 10:01 am; edited 1 time in total
Back to top
View user's profile Send private message Send e-mail
papa87
Заглянувший



Joined: 31 Aug 2011
Posts: 1
Карма: 0
   поощрить/наказать


PostPosted: Sat Sep 03, 2011 11:57 pm (спустя 12 дней 17 часов 1 минуту; написано за 1 минуту 27 секунд)
   Post subject:
Reply with quote

огромное спасибо за ре (www.fuckingfans.ru/)шении испробовал всё отлично =)
Back to top
View user's profile Send private message
Михаил Гутентог
Заглянувший



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

Location: Иркутск

PostPosted: Sat Sep 10, 2011 5:22 am (спустя 6 дней 5 часов 24 минуты; написано за 1 минуту 15 секунд)
   Post subject: Simple Table Sorter v 0.03
Reply with quote

Скрипт оказался востребованным не меньше, чем "Большой" сортировщик, и, по подсказкам пользователей, я решил немного расширить его возможности. Код при этом вырос в 4 раза (стал 7.7 К). Но сортировщик от этого не стал "Большим" - потому что медленно сортирует таблицы больше 1000 строк (хотя и быстрее предыдущей версии) и не умеет фильтровать данные.

Особенностями сортировки можно управлять с помощью атрибута axis у ячеек заголовка в следующем формате:

<th axis='str:alt:asc'>Name<th>, <th axis='num::desc'>Price<th>

Три части значения атрибута, разделённые двоеточиями, имеют следующие значения: первая - тип сортировки (строка или число), вторая - 'alt' (есть или нет) - указывает на участие столбца в анализе значений, третья - предопределённая сортировка при начальной загрузке страницы (desc - нисходящий порядок).

Если указаны столбцы для анализа (сравнения) значений (с помощью атрибута axis или с помощью удержания клавиши Alt при сортировке), ячейки каждой строки будут сравниваться с ячейками предыдущей строки, и если отличий (для указанных столбцов) нет, строки будут иметь один и тот же оттенок. Иначе (если есть хотя бы одно отличие) оттенок меняется. Идея подсказана пользователем AleXH.

В начало скрипта добавлена секция "Настройки".

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

2. Параметр show_log (= true) выводит вверху страницы миллисекунды, показывающие время некоторых операций: первоначальная загрузка DOM, подготовка таблиц, создание массива, сортировка, отрисовка строк в новом порядке.

3. Если strip_tags = true, все HTML тэги из текстов, участвущих в сортировке, будут удалены (иначе нет).

4. Параметр axis_require = false вводит мягкий режим указания типов: если тип не указан, скрипт будет распознавать его автоматически. Если указать axis_require = true, столбцы, у которых не указан тип сортировки, будут исключены из обработки (вообще не будут реагировать на щелчки мышью).

5. Параметр digit_arrow = true меняет в ячейках заголовка треугольные стрелки указания направлений сортировки на квадратики с числами, обозначающими, каким по счёту был отсортирован столбец.

6. Параметр bg_cols = true будет "красить" столбцы таблицы на уровне элементов col; bg_cells = true – будет раскрашиваться каждая ячейка таблицы (у каждого столбца в свой цвет). Эти параметры можно подключать одновременно.

7. Пользователи (а не хозяин таблицы) могут сами определять, какие столбцы должны участвовать в анализе содержания; для этого при сортировочном щелчке надо удерживать клавишу Shift или Alt.

Рабочий пример: ir2.ru/sort0.03/table400.htm. На самом деле сортировка очень быстрая, в примере на 1000 строк (ir2.ru/sort0.03/table1000.htm) по логам видно, что она занимает ~200 мс (в нормальных браузерах); просто без постраничной разбивки браузер долго отрисовывает длинные таблицы (несмотря на всякие ухищрения типа table-layout:fixed).


SimpleTableSorter0.03.zip
 Description:
Simple Table Sorter v 0.03

Download
 Filename:  SimpleTableSorter0.03.zip
 Filesize:  24.71 KB
 Downloaded:  578 Time(s)

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



Joined: 07 Dec 2014
Posts: 1
Карма: 0
   поощрить/наказать


PostPosted: Sun Dec 07, 2014 4:15 am (спустя 3 года 2 месяца 26 дней 22 часа 53 минуты; написано за 1 минуту 17 секунд)
   Post subject:
Reply with quote

Михаил ГутентогНе могу настроить выборку. У меня 3 колонки а этот скрипт работает именно с 12 столбцами.
Как настроить?
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