Среда, 10 Октября 2012 07:46

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

Written by 
Оцени эту запись
(1 Голос)

Как-то увидела статью на подобную тему и стало интересно такое самой сделать. Может кому-то пригодится. Итак, здесь будем рассматривать табличку с тремя колонками - номер, имя и дата. При клике на заголовок колонки, строки таблички сортируются, соответственно, по номеру, имени и дате. 

 

Сложность заключается в том, что все три колонки имеют разные типы данных. А значит и сортировка реализована по числам, по строкам и по датам.

Смотрим демо и кликаем на "Номер", "Имя" или "Дату".

 

Демо

 

HTML код у нас простой:

 

<div class="wrapper" id="wrapper">
<table id="table">
<tr><th>Номер</th><th>Имя</th><th>Дата</th></tr>
<tr><td>9</td><td>Саша</td><td>12.03.10</td></tr>
<tr><td>1</td><td>Маша</td><td>19.05.10</td></tr>
<tr><td>10</td><td>Алена</td><td>17.06.10</td></tr>
<tr><td>8</td><td>Андрей</td><td>04.03.10</td></tr>
<tr><td>2</td><td>Петя</td><td>21.01.10</td></tr>
<tr><td>7</td><td>Лена</td><td>15.08.10</td></tr>
<tr><td>3</td><td>Света</td><td>25.03.10</td></tr>
<tr><td>11</td><td>Вася</td><td>02.05.10</td></tr>
<tr><td>4</td><td>Коля</td><td>13.06.10</td></tr>
<tr><td>6</td><td>Паша</td><td>01.04.10</td></tr>
<tr><td>5</td><td>Катя</td><td>15.03.10</td></tr>
</table>
</div>
 
 
Стилей нету, это по желанию.
 
А теперь подробно рассмотрим JavaScript:
 
 

 

<script type="text/javascript">
function SortTable(){
var table, th = [], tr = [], i, j, k, tr_count, th_count, p = [], q, date1, date2;
table = document.getElementById('table');
tr_count = table.getElementsByTagName('tr').length;
for (i = 0; i < tr_count; i++) {
tr[i] = table.getElementsByTagName('tr')[i];
}
th_count = tr[0].getElementsByTagName('th').length;
for (i = 0; i < th_count; i++) {
th[i] = tr[0].getElementsByTagName('th')[i];
}
function TD(i,j) {
return tr[i+1].getElementsByTagName('td')[j].innerHTML;
}
tr[0].addEventListener('click', function (e) {
var b = e.target || e.srcElement;
for (k = 0; k < th_count; k++) {
if (b == th[k]) {
for (i = 1; i < tr_count; i++) {
for (j = 1; j < tr_count; j++) {
for (q = 0; q < th_count; q++) {
switch (k) {
case 0:
if (parseInt(tr[j].getElementsByTagName('td')[k].innerHTML)>parseInt(tr[i].getElementsByTagName('td')[k].innerHTML)) {
p[q] = tr[j].innerHTML;
tr[j].innerHTML = tr[i].innerHTML;
tr[i].innerHTML = p[q];
}
break;
case 1:
if (tr[j].getElementsByTagName('td')[k].innerHTML>tr[i].getElementsByTagName('td')[k].innerHTML) {
p[q] = tr[j].innerHTML;
tr[j].innerHTML = tr[i].innerHTML;
tr[i].innerHTML = p[q];
}
break;
case 2:
date1 = parseInt (tr[j].getElementsByTagName('td')[k].innerHTML.split ('.').reverse ().join (''));
date2 = parseInt (tr[i].getElementsByTagName('td')[k].innerHTML.split ('.').reverse ().join (''));
if (date1>date2) {
p[q] = tr[j].innerHTML;
tr[j].innerHTML = tr[i].innerHTML;
tr[i].innerHTML = p[q];
}
break;
}
}
}
}
}
}
});
}
</script>
 
 
 
Разберем скрипт по пунктам.
 
1. Задаем переменные - табличку и массив строк таблицы:
 
 
table = document.getElementById('table');
tr_count = table.getElementsByTagName('tr').length;
for (i = 0; i < tr_count; i++) {
tr[i] = table.getElementsByTagName('tr')[i];
}
 
 
2. Определяем массив заголовков, по которым пользователь должен кликать:
 
 
th_count = tr[0].getElementsByTagName('th').length;
for (i = 0; i < th_count; i++) {
th[i] = tr[0].getElementsByTagName('th')[i];
}
 
 
3. Устанавливаем событие на один из заголовков, определяем на который из них был сделан клик:
 
 
tr[0].addEventListener('click', function (e) {
var b = e.target || e.srcElement;
for (k = 0; k < th_count; k++) {
if (b == th[k]) {
}
}
})
 
 
Здесь k - индекс заголовка, на который кликнули.
Обратите внимание, что здесь использовалось делегирование событий. Ведь event мы повесили на первую строку таблицы, а не на сами заголовки.
Подробнее о делегировании событий в статье - http://kate-land.net/js-jquery/item/170-delegate-events.
 
 
4.  Далее мы действуем при помощи switch, так как в зависимости от типа данных в ячейка, мы будем делать разные сравнения элементов.
 
 
5. Если сортировка по первому столбцу, то там у нас числа. Значит строковое значение в ячейке таблицы нужно перевести в число при помощи parseInt(). Иначе они отсортируются не 1,2,3...,10,11, а 1,10,11,2.... Если i-той значение больше j-того, переставляем их местами.
 
 
if (parseInt(tr[j].getElementsByTagName('td')[k].innerHTML)>parseInt(tr[i].getElementsByTagName('td')[k].innerHTML)) {
p[q] = tr[j].innerHTML;
tr[j].innerHTML = tr[i].innerHTML;
tr[i].innerHTML = p[q];
 
 
6. При сортировке по именам, просто сравниваем строки:
 
 
if (tr[j].getElementsByTagName('td')[k].innerHTML>tr[i].getElementsByTagName('td')[k].innerHTML) {
p[q] = tr[j].innerHTML;
tr[j].innerHTML = tr[i].innerHTML;
tr[i].innerHTML = p[q];
 
 
 
7. В случае с датами используем хитрость)) Подсмотрела эте идею на каком-то форуме. Мы беме строку вида 12.03.10, то есть числа, разделенные точками. Переводим эту строку в массив, меняем элементы массива местами, потом объединаем в одну строку и передовим ее в число. Получаем число вида 100312. И уже эти числа сравниваем.
 
 
date1 = parseInt (tr[j].getElementsByTagName('td')[k].innerHTML.split ('.').reverse ().join (''));
date2 = parseInt (tr[i].getElementsByTagName('td')[k].innerHTML.split ('.').reverse ().join (''));
if (date1>date2) {
p[q] = tr[j].innerHTML;
tr[j].innerHTML = tr[i].innerHTML;
tr[i].innerHTML = p[q];
}
 
 
Как видите, у нас есть аж три индекса i, j, q. По первым двум мы сравниваем, а третий индекс нужен для того, чтобы сортировку делать во всех колонках, а не только в сортируемой.
 
 
 

 

Additional Info

Добавить комментарий


Защитный код
Обновить

верстка | CSS | верстка сайтов | HTML | верстальщик | блочная верстка | JavaScript | css верстка | профессиональная верстка сайтов