Простая фильтрация и сортировка jQuery

Кратко опишу принцип работы.

Сортировка:
Создаем собственно фильтруемые элементы, размещаем в data-атрибуте данные, например тут 2 типа данных - имя и дата, приведенная к числу. Соответственно имеем data-jkname и data-finished.

Создаем select, в опциях в качестве значения указывает названия этих data-атрибутов - jkname и finished соответственно.

В коде JS мы сохраняем элементы в переменную, проводим над ними акт фильтрации, удаляем существующие элементы из DOM, и добавляем какбы новые (из переменной) в нужном нам порядке.

Фильтрация:
С фильтрацией все и так понятно, если взглянуть на JS код. Уточню лишь, что в этой версии фильтруется по data-атрибуту jkname.

Рарзметка HTML:


    
    


    
        
            Какой-то контент у блока.
Маша
        
    
    
        
            Какой-то контент у блока.
Коля
        
    
    
        
            Какой-то контент у блока.
Петя
        
    
    
        
            Какой-то контент у блока.
Игнат Васильев
        
    
    
        
            Какой-то контент у блока.
Кто-то еще

Стили CSS:

.filtered_item div{
    padding:5px 10px;
    border:3px solid #ccc;
    margin-bottom:10px;
}

Скрипты JS:

    // Сортировка
    $(document.body).on("change",".elem_filter_select", function(){
        var t = $(this);
        var tVal = t.val();
        if(!tVal.length){
            return false;
        }
        var elements = $(".filtered_item");
        elements.sort(function(a, b){
			var value1=a.dataset[tVal].toLowerCase(), value2=b.dataset[tVal].toLowerCase();
			if (value1 < value2)
				return -1;
			if (value1 > value2)
				return 1;
			return 0;
		});
		$(".filtered_container").find(".filtered_item");
		$(".filtered_container").append(elements);
    });
    //Фильрация по названию
    $(document.body).on("keyup",".elem_filter_namesearch", function(){
        var t = $(this);
        var tVal = t.val().toLowerCase();
        var elements = $(".filtered_item");
        if(!tVal.length){
            elements.show();
        }
        elements.hide();
        elements.filter(function(){
            var str = $(this).data("jkname").toLowerCase();
            if(str.indexOf(tVal) !== -1){
                return true;
            }
        }).show();
    });

Результат:

Какой-то контент у блока.
Маша

Какой-то контент у блока.
Коля

Какой-то контент у блока.
Петя

Какой-то контент у блока.
Игнат Васильев

Какой-то контент у блока.
Кто-то еще

Способ поблагодарить автора сайта:

Комментарии (0)

Напишите первый комментарий