Фильтр по:
  

  • Страница 1 из 2
  • 1
  • 2
  • »
Модератор форума: likbezz  
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Сортировка данных в таблице. Как сделать? (Варианты решения при помощи JavaScript)
Сортировка данных в таблице. Как сделать?
Дата: Четверг, 12.05.2011, 14:29 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Q: Дата: Четверг, 12 Май, 11:42:34 | Сообщение # 296
Quote (Kamar)
У меня такой вопрос, Допустим я создал таблицу и в её ячейках расположены коды :


Quote (Kamar)
$FORUM_POSTS$ $BOARD_POSTS$ ... в последней ячейке находится код скрипта мне надо сделать чтобы по последней ячейке распределялись места в таблице.В коде скрипта присутствуют все операторы и $FORUM_POSTS$ , $BOARD_POSTS$ , load_posts$ и т.д.
Можно ли это сделать как-нибудь ?

...

Прикрепления: 2615353.png (6.5 Kb)

 
Дата: Четверг, 12.05.2011, 14:50 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: 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)
Ещё один:
Пример (Рейтинг игрока)
...

...

Прикрепления: _table.sort_nc.js (5.8 Kb)

 
Дата: Пятница, 13.05.2011, 00:25 |
Рядовой
Группа: Пользователи
Сообщений: 2
Награды: 0
Репутация: 0
Статус: 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>


 
Дата: Пятница, 13.05.2011, 01:04 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: 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>

И тогда всё будет работать.

Пример ...
...

 
Дата: Пятница, 13.05.2011, 16:16 |
Рядовой
Группа: Пользователи
Сообщений: 2
Награды: 0
Репутация: 0
Статус: Offline


likbezz, Спс огромное

 
Дата: Суббота, 13.08.2011, 16:12 |
Добрый
Лейтенант
Группа: Проверенные
Сообщений: 48
Награды: 0
Репутация: 0
Статус: 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>


 
Дата: Суббота, 13.08.2011, 16:40 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: 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>

зачем скрипт?
....


 
Дата: Суббота, 13.08.2011, 16:46 |
Добрый
Лейтенант
Группа: Проверенные
Сообщений: 48
Награды: 0
Репутация: 0
Статус: Offline


Ой и вправду) Спасибо Вам большое ! Я просто не подумал об этом , что так будет работать. Опыта мало(.

 
Дата: Понедельник, 22.08.2011, 11:34 |
kamar1
Рядовой
Группа: Пользователи
Сообщений: 1
Награды: 0
Репутация: 0
Статус: Offline


likbezz, А сам скрипт куда вставлять??и вообще можно по подробней что и куда нужно
Спс


 
Дата: Среда, 24.08.2011, 11:48 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


kamar1,
Quote (kamar1)
А сам скрипт куда вставлять?

После таблицы с информерами, на страницу где используется.


 
Дата: Четверг, 02.02.2012, 23:49 |
Добрый
Лейтенант
Группа: Проверенные
Сообщений: 48
Награды: 0
Репутация: 0
Статус: Offline


Доброе время суток всем !
Вот решил с информера в личку (профиль) вывести какое игрок место в рейтинге занимает (место в рейтинге: 27) http://likbezz.ru/_content/_jscript/2011/sorttable/sorttable_test_1.html не получается(. Вот пришёл за помощью. Скажите пожалуйста, а вывести можно только с помощью скрипта ? Я видел у одного админа на сайте он выводил место в рейтинге.


 
Дата: Пятница, 03.02.2012, 00:45 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Добрый,
Quote (Добрый)
Вот решил с информера в личку (профиль) вывести какое игрок место в рейтинге занимает (место в рейтинге: 27)

Что-то я не очень понял ...
Информер в профиле работает? По моему, да ... что же тогда “не получается”?...
...
Quote (Добрый)
видел у одного админа на сайте он выводил место в рейтинге.

Ну а взять у него и посмотреть как сделано?


 
Дата: Пятница, 03.02.2012, 07:21 |
Добрый
Лейтенант
Группа: Проверенные
Сообщений: 48
Награды: 0
Репутация: 0
Статус: Offline


Code
Что-то я не очень понял ...
Информер в профиле работает? По моему, да ... что же тогда “не получается”?...

В информере (рейтинг игроков) самая левая колонка № места, пользователь занимает например 65 место (по набранным очкам), хочу чтобы у каждого в личке показывало какое он место в рейтинге занимает. (Победы-это модуль онлайн игры, поражения-блог). Как вывести, скриптом ? Или формулой может быть...
Code
Ну а взять у него и посмотреть как сделано?

Он сейчас забросил сайт и всё по убирал((.


Сообщение отредактировал Добрый - Пятница, 03.02.2012, 14:22
 
Дата: Пятница, 03.02.2012, 18:28 |
likbezz
Аццкий кодер
Группа: Администраторы
Сообщений: 9093
Награды: 23
Репутация: 459
Статус: Unknown


Добрый,
Quote (Добрый)
В информере (рейтинг игроков) самая левая колонка № места, пользователь занимает например 65 место (по набранным очкам),

Это я понял, как определяется место?
Что-то на что-то делится? ... Данные по постам в профиле работают, дели и выводи.
...


 
Дата: Пятница, 03.02.2012, 21:28 |
Добрый
Лейтенант
Группа: Проверенные
Сообщений: 48
Награды: 0
Репутация: 0
Статус: Offline


Пользователь добавил материал онлайн игры (+3 очка за победу, умножается) соперник подтвердил результат (добавил материал блог -1 очко отнимается) пусть будет в таблице только они, между ими кто выиграл занимает 1-е место, а кто подтвердил соответственно второе. Вот как вывести соперника место(которое он занимает) в его личку ??? Что делить на что eek Времени мало учить (работа без вых) если подскажете буду Вам очень благодарен !!!

Сообщение отредактировал Добрый - Пятница, 03.02.2012, 22:25
 
Скрипты и коды для юкоз - Форум аццкого кодера » Как сделать? Информация для вновь прибывших » Как сделать... » Сортировка данных в таблице. Как сделать? (Варианты решения при помощи JavaScript)
  • Страница 1 из 2
  • 1
  • 2
  • »
Поиск:


Мобильная версия