Форум

makalet · #1 (**permalink**) 28.10.2015, 18:23

Привет всем. Подскажите как можно сделать сортировку по убыванию и возростанию, кликая по одному и тому же элементу?
Например, есть сортировка по имени. Нажали 1 раз - сортировка по убыванию, якорек меняет цвет через background на желтый(якобы активная сейчас сортировка по убыванию), нажали 2-й раз - сортировка по возрастанию и также изменили положение якорька(повернули кончиком вверх)
Я сделал, но только разделил на 2 части( Имя(А-Я) / Имя(Я-А), а это мне не подходит. Хочется как выше описал
http://jsfiddle.net/51bmvL8r/3/
Желательно давайте измененный код на jsfiddle

рони · #2 (**permalink**) 28.10.2015, 18:51

makalet,
а что сортируем ? самим догадаться?
Сортировка блоков по параметрам

<!DOCTYPE html>
<html>

    <head>
        <title></title>
        <meta charset="utf-8">
        <style>
a {

	color:#000;
	text-decoration:none;
    cursor:   pointer;

}
a span {
  cursor: pointer;
}
a.min span:nth-of-type(1), a span:nth-of-type(2){
    display: none;
}
a.min span:nth-of-type(2){
    display:   inline-block;
}
#sorting{
   padding-left: 50px;
}

</style>

        <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript">

        </script>
        <script type="text/javascript">
            $(function () {
                var a_sort = $('#sorting a');
                var div_conteiner = jQuery.makeArray($('#conteiner div'));
                a_sort.each(function (index, self) {
                    var id = this.id, n = 0;
                    $(self).click(function (e) {
                        e.preventDefault();
                        div_conteiner.sort(function f(a, b) {
                            a = $(a).data(id);
                            b = $(b).data(id);
                            var c = 0
                            if (a > b) c = 1;
                            if (a < b) c = -1;
                            return c
                        });
                        n ^= 1;
                        $(self).toggleClass('min')
                        if (n) div_conteiner.reverse();
                         $.map(div_conteiner, function (div) {
                            $(div).appendTo($('#conteiner'))
                        });
                    });
                });
            });
        </script>
    </head>

    <body>
        <div id="sorting">
            <a href="#" id="price">цена<span>▲</span><span>▼</span></a>
            <a href="#" id="name">название<span>▲</span><span>▼</span></a>
            <a href="#" id="rating">рейтинг<span>▲</span><span>▼</span></a>
        </div>
        <div id="conteiner">
            <div data-price="200" data-name="b" data-rating="4">Text 2 price_200 name_b rating_4</div>
            <div data-price="100" data-name="c" data-rating="5">Text 1 price_100 name_c rating_5</div>
            <div data-price="300" data-name="a" data-rating="3">Text 3 price_300 name_a rating_3</div>
        </div>
    </body>

</html>

makalet · #3 (**permalink**) 28.10.2015, 18:58

рони, сортируем данные из БД. Поэтому кода почти нет. Надо реализовать так, чтобы после success:function(html) данные можно было сортировать так как я говорил выше и вы сделали.
Изначально в таблице загружены все товары, а как только мы нажимаем на сортировку, то данные подгружаются в соответствии с выбранной сортировкой

рони · #4 (**permalink**) 28.10.2015, 19:02

makalet,
есть готовые решения и даже с подгрузкой и пагинацией http://datatables.net/ да и на форуме полно решений про сортировку таблиц

makalet · #5 (**permalink**) 28.10.2015, 19:04

рони, у меня не таблица, а блоки с информацией. Была бы таблица, то не писал бы.

рони · #6 (**permalink**) 28.10.2015, 19:06

makalet,
нельзя сортировать то чего нет ... пишите макет того что у вас сортируется и тогда задавайте вопросы если ещё остались.

makalet · #7 (**permalink**) 28.10.2015, 19:13

рони, да мне хотя бы знать как это сделать. маленький пример же по ссылке дал в 1 посте( но там без данных, да, просто верстка). Может добавлять класс или id какой и формировать запрос sql, кот. также в jsfiddle есть

рони · #8 (**permalink**) 28.10.2015, 19:20

Сообщение от makalet

маленький пример же по ссылке дал в 1 посте

нет там ничего - из того что сортируется
строка 13

Цитата:

'тут добавляются данные'

и как это можно отсортировать?

makalet · #9 (**permalink**) 28.10.2015, 19:42

рони, я делаю в append верстку блока, в котором и находятся данные. Выводятся через html[value]['name'], а сортируются они sql запросом в зависимости от того, какой GET['id'] был получен.

рони · #10 (**permalink**) 28.10.2015, 20:40

makalet,
ок подождём знатока php который может расскажет что у вас в данных, а пока всё тамже отсортируйте мне, но что сортировать не скажу

Форум

Справочник

Discord чат

Курсы javascript