Как отсортировать div элементы?

Question

[Dark_Dante]

Здравствуйте.
Есть html страница. На ней есть таблица. Но таблица необычная, сформированная из div с табличными display
Что то типа такого

<div id="table">
	<div class="table_header">
		<div class="th">Артикул</div>
		<div class="th">Название</div>
		<div class="th">цена</div>
	</div>
	<div class="tr">
		<div class="td column1">3333333</div>
		<div class="td column2">Бла бла бла</div>
		<div class="td column3">150</div>
	</div>
	<div class="tr">
		<div class="td column1">2222</div>
		<div class="td column2">Бла бла бла</div>
		<div class="td column3">250</div>
	</div>
	<div class="tr">
		<div class="td column1">151515</div>
		<div class="td column2">Бла бла бла</div>
		<div class="td column3">350</div>
	</div>
	
</div>

Вкратце, почему это было сделано так, а то извращенцем обзывать будете. Рядов таблицы может быть много. 500. 700. 1500 и так далее. Если использовать обычную таблицу то браузер либо начинает тормозить, либо вообще крашится. Насколько знаю, это связано с повышенными расходами памяти и нагрузкой на процессор при отображении и расчете таблицы. С дивами такого не происходит.

Собственно задача отсортировать таблицу по артикулу.

Видится такая функция, которая возвернет нам сортированный массив div.tr. Ряды, содержащие переданный в функцию артикул должны быть самыми первыми.

function sortList(artikul){
    var rows=$.makeArray($('div.tr')); //тут у нас будут все поля таблицы
      var e= rows.sort(function(a, b){
			//если артикул в данном ряде есть
           if(artikul==$(a).find('div.col1umn1').text()){
               return 1; 
           }else{
               return -1;
           }
       });
	   //возвращаем сортированный массив
    return e;
}

Но почему то не работает. Что я делаю не так? Может быть можно как то элегантнее решить данную задачу?

Answer 1

[Алексей Уколов]

Может быть можно как то элегантнее решить данную задачу?

Разумеется, можно. Достаточно понять, что вам нужно не строки таблицы сортировать, а данные. И уже данные потом рендерить.

Данные должны контролировать DOM, а не наоборот. Такой подход позволит не только существенно ускорить работу приложения (избавляемся от ненужных операций с DOM-элементами), но и сделает код более понятным и расширяемым.

Для этого можно использовать любой mvvm-фреймворк или написать все самому, если такая таблица одна, функционал ограничивается только сортировкой и по каким-то причинам не хочется использовать готовые инструменты.

Посмотрите, например, как просто, а главное понятно, ваша задача решается при помощи Backbone. Приложение разделено на слои и разбито на части, каждый слой и каждая часть занимаются своим делом. Само собой, это quick'n'dirty демо, там могут быть ошибки, так что не стоит использовать этот код в продакшене :)

Comments

[Dark_Dante]

Проблема в том, что данная таблица формируется несколькими порциями данных полученных от ajax. Данные по приходу и так сортируются, правда по цене. Если еще и по артикулу сразу сделать то боюсь я такой алгоритм не придумаю сам=)

[Алексей Уколов]

Dark_Dante: Вам же не нужно их сортировать сразу по артикулу, только при поиске, я так понимаю?
То, что у вас таблица строится по частям, это еще один аргумент в пользу использования MVVM-модели.

Answer 2

[GreatRash]

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

Оффтоп конечно, но вы не пробовали сказать таблице table-layout: fixed; в этом случае скорость расчётов возрастает многократно.

Comments

[Dark_Dante]

Не, не пробовал. Да и теперь уже не попробую, слишком много всего переписывать придется =)