Как использовать jQuery для сортировки тегов div на стороне клиента?

Question

Я хочу разрешить пользователю веб-приложения сортировать результаты запроса без вызова сервера. Я ищу обычный тип click-the-header-to-sort-based-on-the-column.

Однако, я не работаю с фактическим столом. Я буду манипулировать тегами div на основе содержимого. Есть ли способ jQuery, чтобы облегчить это?

Answer 1

This Tutorial направит вас по пути, который вы ищете. Он ориентирован на сортировку табличных данных в html-таблицах, но вы можете легко переназначить примеры для работы с группой элементов div или list или что-то еще.

Некоторые из руководств обучают необработанным методам JavaScript, с поддержкой jQuery для поддержки, поэтому это хороший справочник. Например, в нем рассказывается, как использовать построение JavaScript в методе sort(). Хотите сортировать в алфавитном порядке? Вот модифицированный фрагмент из этого руководства:

var parent_of_divs = $('#parent-of-divs'), rows; 
rows = parent_of_divs.children('div').get(); 
rows.sort(function(a, b) { 
    var keyA, keyB; 
    keyA = $(a).text().toUpperCase(); 
    keyB = $(b).text().toUpperCase(); 
    if (keyA < keyB) return -1; 
    if (keyA > keyB) return 1; 
    return 0; 
}); 
$.each(rows, function(index, row) { 
    parent_of_divs.append(row); 
}); 

Answer 2

Смотрите эту question о сортировке элементов LI. С небольшими изменениями он также может применяться в вашем случае. Среди прочего, рекомендуется использовать плагин TinySort.

Answer 3

Возможно, вам понадобится использовать jquery template lib. вы можете создать шаблон, а затем передать объект данных в шаблон для рендеринга. если вы хотите изменить порядок сортировки, вы сможете изменить объект данных, а затем «обновить()» ваш шаблон.

Answer 4

Там в порядке примера здесь:

Example

Я нашел, что это будет очень хорошо. Кроме того, это легкий плагин (если вы не хотите реализовывать свои собственные). Для меня код был довольно ясным, хотя я новичок в языке.