Javascript.RU

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

var directions = [];
var currentcol = [];

function sorttable(tableId, col)
{
	var data = [];
	var table = document.getElementById(tableId);
	var rows = table.getElementsByTagName('tr');

	if(directions[tableId]==undefined) directions[tableId] = new Array();
	if(directions[tableId][col]==undefined) directions[tableId][col] = false;
	else directions[tableId][col] = !directions[tableId][col];

	if(currentcol[tableId] != col)
	{
		currentcol[tableId] = col;
		directions[tableId][col] = false;
	}

	for(var i = 0; i < rows.length; i++)
	{
		//Пропустить строку заголовка (если нет элементов <td>, а только <th>)
		var cells = rows[i].getElementsByTagName('td');
		if(cells.length == 0) continue;
		var row = [];
		for(var j = 0; j < cells.length; j++)
		{
			row.push(cells[j].innerHTML);
		}

		//Сохраняем элемент <tr>
		row.originalTr = rows[i];
		data.push(row);
	}

	data.sort(function(a,b){
		//Если в ячейке число - сортируем по нему
		if(!isNaN(a[col]) && !isNaN(b[col]))
		return !directions[tableId][col] ? parseFloat(a[col]) > parseFloat(b[col]) : parseFloat(a[col]) < parseFloat(b[col]);
		else
		return !directions[tableId][col] ? a[col] > b[col] : a[col] < b[col];
	});

	for(var i = 0; i < data.length; i++)
	{
		var tr = data[i].originalTr;
		//Убрать из текущего места и добавить в конец
		tr.parentNode.removeChild(tr);
		table.appendChild(tr);
	}
}

Ну, и пример данных.

<table id="table1">
	<tr>
		<th>Место</th>
		<th onclick="sorttable('table1',1)">Страна</th>
		<th onclick="sorttable('table1',2)">Площадь</th>
	</tr>
	<?php
	$fp = fopen('Страны.csv','r');
	while($line = fgetcsv($fp,1024,';') )
	{
		?>
		<tr>
			<td><?php echo $line[0]?></td>
			<td><?php echo $line[1]?></td>
			<td><?php echo intval($line[2])?></td>
		</tr>
		<?php
	}
	?>
</table>

Получится:

<tr>
			<td>1</td>
			<td>Россия </td>
			<td>17075400</td>

		</tr>
				<tr>
			<td>2</td>
			<td>Канада </td>
			<td>9976139</td>
		</tr>
				<tr>

			<td>3</td>
			<td>Китайская Народная Республика (КНР) </td>
			<td>9598961</td>
		</tr>
...

Проверено пока только в Firefox.

+1

Автор: Ivan Galin, дата: 9 сентября, 2011 - 18:26
#permalink

>>If child is a reference to an existing node in the document, appendChild moves it from its current position to the new position (i.e. there is no requirement to remove the node from its parent node before appending it to some other node).

т.е нет необходимости в

tr.parentNode.removeChild(tr);

проверку направления стоит вынести из sortFunc (сортировать всегда в одном направлении),
а затем при вставке выбрать направление цикла :

if( directions[tableId][col] )
{
    for(var i = 0; i < data.length; i++)
    {
        //Убрать из текущего места и добавить в конец
        table.appendChild( data[i].originalTr );
    }
} else
{
    for(var i = data.length; i > 0; i--)
    {
        //Убрать из текущего места и добавить в конец
        table.appendChild( data[i-1].originalTr );
    }
}

доработал - http://jsfiddle.net/ivangalin/ufEVA/
работает в Chrome 15 и FF 3.6


Автор: Jason Bourne, дата: 9 сентября, 2011 - 19:04
#permalink

Спасибо - и за замечание, и за доработку.


Отправить комментарий

Приветствуются комментарии:
  • Полезные.
  • Дополняющие прочитанное.
  • Вопросы по прочитанному. Именно по прочитанному, чтобы ответ на него помог другим разобраться в предмете статьи. Другие вопросы могут быть удалены.
    Для остальных вопросов и обсуждений есть форум.
P.S. Лучшее "спасибо" - не комментарий, как все здорово, а рекомендация или ссылка на статью.
Содержание этого поля является приватным и не предназначено к показу.
  • Адреса страниц и электронной почты автоматически преобразуются в ссылки.
  • Разрешены HTML-таги: <strike> <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <u> <i> <b> <pre> <img> <abbr> <blockquote> <h1> <h2> <h3> <h4> <h5> <p> <div> <span> <sub> <sup>
  • Строки и параграфы переносятся автоматически.
  • Текстовые смайлы будут заменены на графические.

Подробнее о форматировании

CAPTCHA
Антиспам
5 + 2 =
Введите результат. Например, для 1+3, введите 4.
 
Поиск по сайту
Другие записи этого автора
Jason Bourne
Содержание

Учебник javascript

Основные элементы языка

Сундучок с инструментами

Интерфейсы

Все об AJAX

Оптимизация

Разное

Дерево всех статей

Популярные таги
Последние комментарии
Последние темы на форуме
Forum