Как сделать упорядочивание div по убыванию и возрастанию?

Question

[Дмитрий]

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

.rating_category_header {
            display: flex;
            margin-bottom: 10px;
        }

        .rating_category_header--number,
        .rating_category_header--photo,
        .rating_category_header--athlete,
        .rating_category_header--trenings,
        .rating_category_header--time,
        .rating_category_header--distance {
            margin-right: 30px;
        }

        .rating_category_item {
            display: flex;
        }

        .rating_item_result {
            display: flex;
        }

        .rating_item_athlete--number {
            margin-right: 35px;
        }

        .rating_item_result--trenings {
            margin-right: 65px;
        }
        .rating_item_result--time {
            margin-right: 30px;
        }

<div class="section_body">
        <div class="rating_category">
            <div class="rating_category_header">
                <div class="rating_category_header--number"><a href="">№</a></div>
                <div class="rating_category_header--trenings"><a href=""><span class="ico_trenings"></span><span>trenings</span></a></div>
                <div class="rating_category_header--time"><a href=""><span class="ico_time"></span><span>time</span></a></div>
                <div class="rating_category_header--distance"><a href=""><span class="ico_map"></span><span>distance</span></a></div>
            </div>
            <div class="rating_category_item">
                <div class="rating_item_athlete">
                    <div class="rating_item_athlete--number">1</div>
                </div>
                <div class="rating_item_result">
                    <div class="rating_item_result--trenings">
                        <strong>830</strong>
                    </div>
                    <div class="rating_item_result--time">
                        <strong class="js-date-duration">00:60:58</strong>
                    </div>
                    <div class="rating_item_result--distance">
                        <strong>800 км</strong>
                    </div>
                </div>
            </div>
            <div class="rating_category_item">
                <div class="rating_item_athlete">
                    <div class="rating_item_athlete--number">2</div>
                </div>
                <div class="rating_item_result">
                    <div class="rating_item_result--trenings">
                        <strong>300</strong>
                    </div>
                    <div class="rating_item_result--time">
                        <strong class="js-date-duration">1:42:36</strong>
                    </div>
                    <div class="rating_item_result--distance">
                        <strong>600 км</strong>
                    </div>
                </div>
            </div>
        </div>
    </div>

Comments

[Roman Khegay]

По какому атрибуту сортировать?

[Дмитрий]

Roman Khegay, данные подгружаются из базы данных, сортировка нужна на js или jquery

[Roman Khegay]

moiseev1788, Я прочитал вопрос. Повторюсь: сортировка работает по какому-то признаку: id, название, описание либо другой атрибут. Если вы же хотите сделать сортировку по каждому из параметров, то я советую не писать костыли, а взять datatables, если же вы решите писать костыль, то вот код для сортировки через data-sort:

var result = $('div').sort(function (a, b) {
    var contentA = parseInt( $(a).data('sort'));
    var contentB = parseInt( $(b).data('sort'));

    return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
});

$('#mylist').html(result);

P.S. Хорошей практикой будет сортировка через сервер. Потому что, если данных много, то вступает в работу пагинация, чтобы запросы и ответы были не слишком большими, в таком случае сортировать контент, который только на странице, а не весь не сработает.

[Дмитрий]

Roman Khegay, данный плагин будет работать не с таблицами?

[Roman Khegay]

moiseev1788, нет.