С Новым годом! Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.79/29: Рейтинг темы: голосов - 29, средняя оценка - 4.79
 Аватар для Nerealist
0 / 0 / 1
Регистрация: 15.05.2014
Сообщений: 80

Динамическая кнопка сортировки таблицы

15.12.2015, 04:17. Показов 5635. Ответов 7
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
На самом деле мне кажется что это простая задача, но я что-то не нашёл этого нигде, как это сделать.
Есть кнопка (Треугольник) который при нажатии на нём сортирует таблицу в ту или иную сторону. Но мне нужно чтобы треугольник показывал направление сортировки. Т.е. менялся при нажатии на нём.

Соответственно код:
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
(function(){
    var a_re = /[cdu]\_\d+\_[cdu]/, a_color = 1
    function hc(s, c) {return (" " + s + " ").indexOf(" " + c + " ") !== -1}
    function ac(e, c) {var s = e.className; if (!hc(s, c)) e.className += " " + c}
    prepTabs = function (t){
        var el, th, cs, c, cell, axis, ts = (t && t.className) ? [t] : document.getElementsByTagName("table")
        for (var e in ts) {
            el = ts[e]
            if (hc(el.className, "sortable")) {
                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
            }
        }
    }
    var clicktab = function (e) {
        e = e || window.event
        var obj = e.target || e.srcElement
        while (!obj.tagName.match(/^(span)$/i)) obj = obj.parentNode
        var i = obj.cellIndex, t = obj.parentNode
        while (!t.tagName.match(/^table$/i)) t = t.parentNode
        
        var cn = obj.className, verse = /d\_\d+\_d/.test(cn),
        dir = (verse) ? "u" : "d", new_cls = dir + "_" + a_color + "_" + dir
        if (a_color < 8) a_color++
        if (a_re.test(cn)) obj.className = cn.replace(a_re, new_cls)
        else obj.className = new_cls
        
        var j = 0, tb = t.tBodies[0], rows = tb.rows, l = rows.length, c, v, vi
        if (i !== t.sorted) {
            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 (!isNaN(vi)) while (vi.length < 10) vi = "0" + vi
                else vi = v
                t.sarr[j] = [vi + (j/1000000000).toFixed(10), rows[j]]
            }
        }
        t.sarr = t.sarr.sort()
        if (verse) t.sarr = t.sarr.reverse()
        t.sorted = i
        for (j = 0; j < l; j++) tb.appendChild(t.sarr[j][1])
        obj.title = "Отсортированно по " + ((verse) ? "убыванию" : "возрастанию")
    }
    window.onload = prepTabs
})()
И таблица
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
        <table class="sortable">
                           <tr>
                                <th>Name<span><a href="javasript://" style="text-decoration: none;"></a></span></th>
                                <th>Price<span><a href="javasript://" style="text-decoration: none;"></a><span></th>
                                <th>Actions</th>
                           </tr>
                           <tr>
                               <td><div id="1">Товар 1</div></td>
                               <td>$12.352.24</td>
                               <td>
                                <input type="button" value="Edit">
                                <input type="button" value="Delete">
                               </td>
                           </tr>
                           <tr>
                               <td>Товар 2</td>
                               <td>$12.352.25</td>
                               <td>
                                <input type="button" value="Edit">
                                <input type="button" value="Delete">
                               </td>
                           </tr>
                  </table>
0
Programming
Эксперт
39485 / 9562 / 3019
Регистрация: 12.04.2006
Сообщений: 41,671
Блог
15.12.2015, 04:17
Ответы с готовыми решениями:

Динамическая кнопка "Скрыть/развернуть текст"
В процессе работы возникла такая проблема, в моем шаблоне текст размещается в поле со скроллбаром, который реализован с помощью...

Динамическая подгрузка данных и кнопка "назад"
Существует, думаю, всем известная неудобность, когда после динамической подгрузки сообщений ты перешел по какому-нибудь из них, потом нажал...

Динамическая кнопка
Помогите пожалуйста сделать &quot;растягивающуюся&quot; кнопку. В css файле шаблона вот что прописано. Т. е. данная кнопка не предназначена для...

7
Superposition
 Аватар для Padimanskas
950 / 615 / 256
Регистрация: 27.10.2013
Сообщений: 2,083
15.12.2015, 15:14
Nerealist, не вино Array.prototype.sort. Да и вообще код жутко воняет

Добавлено через 3 минуты
а, нэт) есть сорт. но как-то он почти не акцентируется

Добавлено через 11 минут
В общем, нужен признак того как отсортирована табла. Это обычный триггер, булева переменная или строка обозначающая способ сортировки(или всё вместе).
JavaScript
1
2
3
4
var ascending = true;
var descending = false;
//или
var sortMethod = 'ascending'; // descending
и соответствующий стилевой класс с какой-нибудь небольшой картинкой в base64
CSS
1
2
3
.ascending{
    background-image: url("data:image/png;base64, ... ");
}
0
 Аватар для Nerealist
0 / 0 / 1
Регистрация: 15.05.2014
Сообщений: 80
15.12.2015, 15:48  [ТС]
Так, если я правильно понял то более развёрнутым ответом для чайников это:

1. Нам нужна Переменная типа Boolean которая проверяет да или нет
2. Данная переменная по признаку сортировку "Вниз" "Вверх" проверяет и показывает соответствующую картинку.
3. Где или как Найти тот самый признак в коде?

Код писал не я, нашёл в инете немножко его подпилил под спаны и запилил его типа ссылкой для того чтобы он был кликабельным и по кнопке а не на ячейку.
0
152 / 151 / 67
Регистрация: 25.02.2015
Сообщений: 493
15.12.2015, 17:19
http://plnkr.co/edit/im9GDgRDA... ?p=preview Вот есть код сортировки таблицы, он как то почитабельнее мне кажется и допилить его проще.
0
 Аватар для Nerealist
0 / 0 / 1
Регистрация: 15.05.2014
Сообщений: 80
15.12.2015, 17:55  [ТС]
Проще не всегда лучше, данный скрипт требует обязательное использование тега тбоди
0
Superposition
 Аватар для Padimanskas
950 / 615 / 256
Регистрация: 27.10.2013
Сообщений: 2,083
15.12.2015, 19:59
Цитата Сообщение от Nerealist Посмотреть сообщение
данный скрипт требует обязательное использование тега тбоди
Спецификация требует правильной структуры документа, поэтому браузер сам все за нами исправляет и подчищает. Например, он дописывает элемент tbody в table так как это указано в соглашении. Вот по этой причине можно всегда быть уверенным в наличии tBodies. Это по тому что у таблицы должно быть все правильно - голова, тело, ногы )
А еще можно посмотреть в инспекторе как браузер решил все проблемы с разметкой.
мой пример:
http://jsfiddle.net/Ln5447xh/2/
0
 Аватар для Nerealist
0 / 0 / 1
Регистрация: 15.05.2014
Сообщений: 80
16.12.2015, 02:26  [ТС]
Цитата Сообщение от Padimanskas Посмотреть сообщение
мой пример:
http://jsfiddle.net/Ln5447xh/2/
Не знаю как у тебя у меня место стрелощщщки зыгыгулинки.
Да и сортировку ты то ли убрал, то ли она не работает, ммм...
0
 Аватар для Nerealist
0 / 0 / 1
Регистрация: 15.05.2014
Сообщений: 80
23.12.2015, 10:25  [ТС]
Padimanskas, Так ты всё таки можешь объяснить выше написанный код
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
inter-admin
Эксперт
29715 / 6470 / 2152
Регистрация: 06.03.2009
Сообщений: 28,500
Блог
23.12.2015, 10:25
Помогаю со студенческими работами здесь

Динамическая кнопка с картинкой
Всем привет, нужна помощь Сделал свою кнопку, с картинками, вставляю программно, но никак нимогу задать размер Помогите решить...

Динамическая кнопка (MFC)
Задача такая: dialog based -&gt; создать кнопку, при нажатии на которую левой кнопкой мыши кнопка перемещается в заданное место окна, а при...

Динамическая кнопка возвращающая значение
Хочу создать динамически кнопку, которая возвращает свой номер. Возможно id через setproperty, но только для динамических элементов я не...

Динамическая кнопка на динамическом TabSheet
Есть TPageControl, программно добавляются tabsheet'ы а на них кнопки. Создание кнопки TButton * b = new TButton(mF); ...

Кнопка сортировки
на странице есть кнопка сортировать &quot;по дате&quot; как сделать так что бы при первом клике новости сортировались по возрастанию при втором...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
8
Ответ Создать тему
Новые блоги и статьи
Модель микоризы: классовый агентный подход
anaschu 02.01.2026
Раньше это было два гриба и бактерия. Теперь три гриба, растение. И на уровне агентов добавится между грибами или бактериями взаимодействий. До того я пробовал подход через многомерные массивы,. . .
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути
Programma_Boinc 01.01.2026
Учёным и волонтёрам проекта «Einstein@home» удалось обнаружить четыре гамма-лучевых пульсара в джете Млечного Пути Сочетание глобально распределённой вычислительной мощности и инновационных. . .
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост.
Programma_Boinc 28.12.2025
Советы по крайней бережливости. Внимание, это ОЧЕНЬ длинный пост. Налог на собак: https:/ / **********/ gallery/ V06K53e Финансовый отчет в Excel: https:/ / **********/ gallery/ bKBkQFf Пост отсюда. . .
Кто-нибудь знает, где можно бесплатно получить настольный компьютер или ноутбук? США.
Programma_Boinc 26.12.2025
Нашел на реддите интересную статью под названием Anyone know where to get a free Desktop or Laptop? Ниже её машинный перевод. После долгих разбирательств я наконец-то вернула себе. . .
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка.
Programma_Boinc 23.12.2025
Рецензия / Мнение/ Перевод Нашел на реддите интересную статью под названием The Thinkpad X220 Tablet is the best budget school laptop period . Ниже её машинный перевод. Thinkpad X220 Tablet —. . .
PhpStorm 2025.3: WSL Terminal всегда стартует в ~
and_y87 14.12.2025
PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .
Как объединить две одинаковые БД Access с разными данными
VikBal 11.12.2025
Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.
Новый ноутбук
volvo 07.12.2025
Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro
Музыка, написанная Искусственным Интеллектом
volvo 04.12.2025
Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python
IndentationError 23.11.2025
Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru