Сортировка данных в таблице. Как сделать?
|
|
|
2011-05-12Дата: Четверг, 12.05.2011, 14:29 | Сообщение # 1 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Q: Дата: Четверг, 12 Май, 11:42:34 | Сообщение # 296 Quote (Kamar) У меня такой вопрос, Допустим я создал таблицу и в её ячейках расположены коды : Quote (Kamar) $FORUM_POSTS$ $BOARD_POSTS$ ... в последней ячейке находится код скрипта мне надо сделать чтобы по последней ячейке распределялись места в таблице.В коде скрипта присутствуют все операторы и $FORUM_POSTS$ , $BOARD_POSTS$ , load_posts$ и т.д. Можно ли это сделать как-нибудь ? ...
| | |
|
|
2011-05-12Дата: Четверг, 12.05.2011, 14:50 | Сообщение # 2 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Да, можно, при помощи JavaScript.
Ваша таблица должна быть сформирована следующим образом - необходимо для правильной работы скрипта: Code <table class="sort" style="width:90%;" border="0" cellspacing="0" cellpadding="0"> <thead> <tr> <td>№</td> <td>КОМАНДА</td> <td>И</td> <td>В</td> <td>Н</td> <td>П</td> <td>М</td> <td>О</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>Челябинск</td> <td>3</td> <td>3</td> <td>0</td> <td>0</td> <td>5-1</td> <td>9</td> </tr> <tr> <td>2</td> <td>Уфа</td> <td>3</td> <td>3</td> <td>0</td> <td>0</td> <td>5-1</td> <td>9</td> </tr> </tbody> </table>
А именно, необходимо указать теги thead (шапка таблицы) и tbody (основная часть).
Также нужно создать две картинки, для вариантов сортировки - 0.gif (картинка сортировки вниз) и 1.gif (картинка сортировки вверх). Затем, поменять в скрипте переменную img_dir (см. ниже JavaScript).
Стили - просто для оформления - можете редактировать по своему усмотрению: Code table.sort{border-collapse:collapse;border-spacing:0;border:0 none;font-size:100%;margin:5px auto;} table.sort td{border:1px solid #CCC;padding:3px 5px;} table.sort thead td{cursor:pointer;font-weight:bold;text-align:center;vertical-align:middle;} table.sort thead td.curcol{background-color:#999;color:#FFF;}
Сам скрипт: Code /* originally written by paul sowden <paul@idontsmoke.co.uk> | http://idontsmoke.co.uk modified and localized by alexander shurkayev <alshur@ya.ru> | http://htmlcssjs.ru */ var img_dir = "/_source/_ico/2011/01/"; /* папка с картинками */ var sort_case_sensitive = false; /* вид сортировки (регистрозависимый или нет) */ /* ф-ция, определяющая алгоритм сортировки */ function _sort(a, b) { var a = a[0]; var b = b[0]; var _a = (a + '').replace(/,/, '.'); var _b = (b + '').replace(/,/, '.'); if (parseFloat(_a) && parseFloat(_b)) return sort_numbers(parseFloat(_a), parseFloat(_b)); else if (!sort_case_sensitive) return sort_insensitive(a, b); else return sort_sensitive(a, b); }; /* ф-ция сортировки чисел */ function sort_numbers(a, b) { return a - b; }; /* ф-ция регистронезависимой сортировки */ function sort_insensitive(a, b) { var anew = a.toLowerCase(); var bnew = b.toLowerCase(); if (anew < bnew) return -1; if (anew > bnew) return 1; return 0; }; /* ф-ция регистрозависимой сортировки */ function sort_sensitive(a, b) { if (a < b) return -1; if (a > b) return 1; return 0; }; /* вспомогательная ф-ция, выдирающая из дочерних узлов весь текст */ function getConcatenedTextContent(node) { var _result = ""; if (node == null) { return _result; } var childrens = node.childNodes; var i = 0; while (i < childrens.length) { var child = childrens.item(i); switch (child.nodeType) { case 1: /* ELEMENT_NODE */ case 5: /* ENTITY_REFERENCE_NODE */ _result += getConcatenedTextContent(child); break; case 3: /* TEXT_NODE */ case 2: /* ATTRIBUTE_NODE */ case 4: /* CDATA_SECTION_NODE */ _result += child.nodeValue; break; case 6: /* ENTITY_NODE */ case 7: /* PROCESSING_INSTRUCTION_NODE */ case 8: /* COMMENT_NODE */ case 9: /* DOCUMENT_NODE */ case 10: /* DOCUMENT_TYPE_NODE */ case 11: /* DOCUMENT_FRAGMENT_NODE */ case 12: /* NOTATION_NODE */ /* skip */ break; } i++; } return _result; }; /* суть скрипта */ function sort(e) { var el = window.event ? window.event.srcElement : e.currentTarget; while (el.tagName.toLowerCase() != "td") el = el.parentNode; var a = new Array(); var name = el.lastChild.nodeValue; var dad = el.parentNode; var table = dad.parentNode.parentNode; var up = table.up; var node, arrow, curcol; for (var i = 0; (node = dad.getElementsByTagName("td").item(i)); i++) { if (node.lastChild.nodeValue == name){ curcol = i; if (node.className == "curcol"){ arrow = node.firstChild; table.up = Number(!up); }else{ node.className = "curcol"; arrow = node.insertBefore(document.createElement("img"),node.firstChild); table.up = 0; } arrow.src = img_dir + table.up + ".gif"; arrow.alt = ""; }else{ if (node.className == "curcol"){ node.className = ""; if (node.firstChild) node.removeChild(node.firstChild); } } } var tbody = table.getElementsByTagName("tbody").item(0); for (var i = 0; (node = tbody.getElementsByTagName("tr").item(i)); i++) { a[i] = new Array(); a[i][0] = getConcatenedTextContent(node.getElementsByTagName("td").item(curcol)); a[i][1] = getConcatenedTextContent(node.getElementsByTagName("td").item(1)); a[i][2] = getConcatenedTextContent(node.getElementsByTagName("td").item(0)); a[i][3] = node; } a.sort(_sort); if (table.up) a.reverse(); for (var i = 0; i < a.length; i++) { tbody.appendChild(a[i][3]); } }; /* ф-ция инициализации всего процесса */ function init(e) { if (!document.getElementsByTagName) return;
for (var j = 0; (thead = document.getElementsByTagName("thead").item(j)); j++) { var node; for (var i = 0; (node = thead.getElementsByTagName("td").item(i)); i++) { if (node.addEventListener) node.addEventListener("click", sort, false); else if (node.attachEvent) node.attachEvent("onclick", sort); node.title = "Нажмите на заголовок, чтобы отсортировать колонку"; } thead.parentNode.up = 0; if (typeof(initial_sort_id) != "undefined"){ td_for_event = thead.getElementsByTagName("td").item(initial_sort_id); if (document.createEvent){ var evt = document.createEvent("MouseEvents"); evt.initMouseEvent("click", false, false, window, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, td_for_event); td_for_event.dispatchEvent(evt); } else if (td_for_event.fireEvent) td_for_event.fireEvent("onclick"); if (typeof(initial_sort_up) != "undefined" && initial_sort_up){ if (td_for_event.dispatchEvent) td_for_event.dispatchEvent(evt); else if (td_for_event.fireEvent) td_for_event.fireEvent("onclick"); } } } };
/* запускаем ф-цию init() при возникновении события load */ var root = window.addEventListener || window.attachEvent ? window : document.addEventListener ? document : null; if (root){ if (root.addEventListener) root.addEventListener("load", init, false); else if (root.attachEvent) root.attachEvent("onload", init); }
☑ Прикрепление (скрипт сортировки данных) ... Есть возможность указать начальное состояние отсортированного столбца. Для этого нужно определить переменные initial_sort_id (номер столбца, начиная с нуля) и initial_sort_up (0 или 1, сортировка вниз или вверх).
Code <script type="text/javascript"> initial_sort_id=0; initial_sort_up=0; </script> - Вставляется после таблицы. ...
Пример: ☑ Живой пример (Футбол — Второй дивизион - 2011) Зеркало: ☑ Пример (Футбол — Второй дивизион - 2011) Ещё один: ☑ Пример (Рейтинг игрока) ... ...
| | |
|
|
2011-05-13Дата: Пятница, 13.05.2011, 00:25 | Сообщение # 3 |
Рядовой
Группа: Пользователи
Статус: Offline
|
да это всё классно,но если вставляешь информеры в таблицу всёравно не получается то что надо Добавлено (13.05.2011, 00:25) --------------------------------------------- Вот мой код информера Code <p align="center"><table width="550" class="tablebg" border="1"> <tbody> <tr class="navtn" align="center"> <td width="28"> <p>$NUMBER$</p> </td> <td width="130"> <p align="left"><a href="$PROFILE_URL$">$USERNAME$</a></p> </td> <td width="30"> <p>$BOARD_POSTS$</p> </td> <td width="30">$LOAD_POSTS$</td> <td width="30">$DIR_POSTS$</td> <td width="30"> <p>$BLOG_POSTS$</p> </td> <td width="30"> <p>$PHOTO_POSTS$</p> </td> <td width="30">$PUBL_POSTS$</td> <td width="30"> <p><span style="font-size: 10pt; "> <script> document.write ((($FORUM_POSTS$+$BOARD_POSTS$*16+$DIR_POSTS$*16-$BLOG_POSTS$*16)+($PHOTO_POSTS$/10*10^9))-(($PUBL_POSTS$/10*10^9)));
</script> </span></p> </td> </tr> </tbody></table></p>
| | |
|
|
2011-05-13Дата: Пятница, 13.05.2011, 01:04 | Сообщение # 4 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
kamar, Quote (kamar) да это всё классно,но если вставляешь информеры в таблицу всёравно не получается то что надо Ты не внимательно читал: Таблица должна иметь класс «sort» Quote <table class="sort" style="width:90%;" border="0" cellspacing="0" cellpadding="0"> Quote (likbezz) должна быть сформирована следующим образом - необходимо для правильной работы скрипта: Quote (Code) <table class="sort" style="width:90%;" border="0" cellspacing="0" cellpadding="0"> <thead> <tr> <td>№</td> <td>КОМАНДА</td> <td>И</td> <td>В</td> </tr> </thead> <tbody> <tr> <td>1</td> <td>Челябинск</td> <td>3</td> <td>3</td> </tr> </tbody> </table> А именно, необходимо указать теги thead (шапка таблицы) и tbody (основная часть). ... Код твоего информера должен быть примерно таким: Code <tr align="center"><td width="28"><p>$NUMBER$</p></td><td width="130"><p align="left"><a href="$PROFILE_URL$">$USERNAME$</a></p></td> ..... </tr> А сам информер нужно поместить в саму таблицу: Code <table class="sort" style="width:90%;" border="0" cellspacing="0" cellpadding="0"> <thead> <tr> <td>NUMBER</td> .... <td>SUMMA</td> </tr> </thead> <tbody>$MYINF_47$</tbody> </table> И тогда всё будет работать. ☑ Пример ... ...
| | |
|
|
2011-05-13Дата: Пятница, 13.05.2011, 16:16 | Сообщение # 5 |
Рядовой
Группа: Пользователи
Статус: Offline
|
likbezz, Спс огромное
| | |
|
|
2011-08-13Дата: Суббота, 13.08.2011, 16:12 | Сообщение # 6 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
likbezz, подскажи, а этот скрипт сортирует формулу ? Просто у меня по очкам не сортирует, верней сортирует но неправильно: <TD align="center" width=15%><font color="#d9ed00"><script> document.write($STUFF_POSTS$ * 3 + $DIR_POSTS$); </script></font></TD> Победы сортирует:<td align="center" width=15%>$STUFF_POSTS$</td> Поражения тоже: <td align="center" width=15%>$DIR_POSTS$</td>
| | |
|
|
2011-08-13Дата: Суббота, 13.08.2011, 16:40 | Сообщение # 7 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Добрый,Quote (Добрый) <TD align="center" width=15%><font color="#d9ed00"><script> document.write($STUFF_POSTS$ * 3 + $DIR_POSTS$); </script></font></TD> Данные через document.write сортировать не будет ... А зачем вам это? Почему не просто системными операторами: Code <TD align="center" width=15%><font color="#d9ed00"><?($STUFF_POSTS$*3+$DIR_POSTS$)?></font></TD> зачем скрипт? ....
| | |
|
|
2011-08-13Дата: Суббота, 13.08.2011, 16:46 | Сообщение # 8 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
Ой и вправду) Спасибо Вам большое ! Я просто не подумал об этом , что так будет работать. Опыта мало(.
| | |
|
|
2011-08-22Дата: Понедельник, 22.08.2011, 11:34 | Сообщение # 9 |
Рядовой
Группа: Пользователи
Статус: Offline
|
likbezz, А сам скрипт куда вставлять??и вообще можно по подробней что и куда нужно Спс
| | |
|
|
2011-08-24Дата: Среда, 24.08.2011, 11:48 | Сообщение # 10 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
kamar1, Quote (kamar1) А сам скрипт куда вставлять? После таблицы с информерами, на страницу где используется.
| | |
|
|
2012-02-02Дата: Четверг, 02.02.2012, 23:49 | Сообщение # 11 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
Доброе время суток всем ! Вот решил с информера в личку (профиль) вывести какое игрок место в рейтинге занимает (место в рейтинге: 27) http://likbezz.ru/_content/_jscript/2011/sorttable/sorttable_test_1.html не получается(. Вот пришёл за помощью. Скажите пожалуйста, а вывести можно только с помощью скрипта ? Я видел у одного админа на сайте он выводил место в рейтинге.
| | |
|
|
2012-02-03Дата: Пятница, 03.02.2012, 00:45 | Сообщение # 12 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Добрый, Quote (Добрый) Вот решил с информера в личку (профиль) вывести какое игрок место в рейтинге занимает (место в рейтинге: 27) Что-то я не очень понял ... Информер в профиле работает? По моему, да ... что же тогда “не получается”?... ... Quote (Добрый) видел у одного админа на сайте он выводил место в рейтинге. Ну а взять у него и посмотреть как сделано?
| | |
|
|
2012-02-03Дата: Пятница, 03.02.2012, 07:21 | Сообщение # 13 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
Code Что-то я не очень понял ... Информер в профиле работает? По моему, да ... что же тогда “не получается”?... В информере (рейтинг игроков) самая левая колонка № места, пользователь занимает например 65 место (по набранным очкам), хочу чтобы у каждого в личке показывало какое он место в рейтинге занимает. (Победы-это модуль онлайн игры, поражения-блог). Как вывести, скриптом ? Или формулой может быть... Code Ну а взять у него и посмотреть как сделано? Он сейчас забросил сайт и всё по убирал((.
Сообщение отредактировал Добрый - Пятница, 03.02.2012, 14:22 | | |
|
|
2012-02-03Дата: Пятница, 03.02.2012, 18:28 | Сообщение # 14 |
Аццкий кодер
Группа: Администраторы
Статус: Unknown
|
Добрый, Quote (Добрый) В информере (рейтинг игроков) самая левая колонка № места, пользователь занимает например 65 место (по набранным очкам), Это я понял, как определяется место? Что-то на что-то делится? ... Данные по постам в профиле работают, дели и выводи. ...
| | |
|
|
2012-02-03Дата: Пятница, 03.02.2012, 21:28 | Сообщение # 15 |
Лейтенант
Группа: Проверенные
Статус: Offline
|
Пользователь добавил материал онлайн игры (+3 очка за победу, умножается) соперник подтвердил результат (добавил материал блог -1 очко отнимается) пусть будет в таблице только они, между ими кто выиграл занимает 1-е место, а кто подтвердил соответственно второе. Вот как вывести соперника место(которое он занимает) в его личку ??? Что делить на что Времени мало учить (работа без вых) если подскажете буду Вам очень благодарен !!!
Сообщение отредактировал Добрый - Пятница, 03.02.2012, 22:25 | | |
|