Параметры сортировки

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

Основные параметры сортировки

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

$('.grid').isotope({
  getSortData: {
    name: '.name',        // Использует текстовое содержимое внутри элемента с классом .name
    symbol: '.symbol',
    number: '.number parseInt', // Преобразует текст в число для числовой сортировки
    category: '[data-category]', // Использует значение атрибута data-category
    weight: function(itemElem) {
      var weight = $(itemElem).find('.weight').text();
      return parseFloat(weight);
    }
  }
});

Особенности параметров:

  • Селекторы: Можно передавать CSS-селектор, Isotope извлечет текстовое содержимое выбранного дочернего элемента.
  • Атрибуты: Использование квадратных скобок позволяет читать данные из атрибутов HTML ([data-attribute]).
  • Функции: Позволяют вычислять значения динамически, что особенно полезно для сложных структур или числовых преобразований.

Типы сортировки

Isotope поддерживает два основных типа сортировки:

  1. Лексикографическая (текстовая) Используется для алфавитного порядка по текстовому содержимому. Например, сортировка по имени продукта:

    $('.grid').isotope({ sortBy: 'name' });

    Если нужно сортировать в обратном порядке, используется параметр sortAscending:

    $('.grid').isotope({
  sortBy: 'name',
  sortAscending: false
});

  2. Числовая Для чисел важно правильно преобразовать текст в число с помощью parseInt или parseFloat. Это гарантирует корректный порядок, иначе элементы будут сортироваться как строки:

    $('.grid').isotope({ sortBy: 'number' });

Параметр sortAscending

Параметр sortAscending определяет направление сортировки:

  • true — по возрастанию (по умолчанию)
  • false — по убыванию
  • Можно задавать объект, если требуется различное направление для разных свойств:
$('.grid').isotope({
  sortBy: 'weight',
  sortAscending: {
    name: true,
    number: false
  }
});

Сортировка по нескольким критериям

Isotope позволяет комбинировать несколько критериев сортировки. Порядок сортировки определяется массивом свойств:

$('.grid').isotope({
  sortBy: ['category', 'name']
});

В этом примере сначала элементы будут сгруппированы по категории, а внутри каждой категории — отсортированы по имени.

Динамическая сортировка

Изменение порядка элементов можно выполнять после инициализации Isotope:

var $grid = $('.grid').isotope({
  getSortData: {
    name: '.name',
    price: function(itemElem) {
      return parseFloat($(itemElem).find('.price').text());
    }
  },
  sortBy: 'name'
});

// Сортировка по цене
$grid.isotope({ sortBy: 'price' });

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

Поддержка нестандартных данных

Функции в getSortData позволяют работать с любыми нестандартными данными, включая числа с символами валют, даты или комбинированные значения:

getSortData: {
  price: function(itemElem) {
    var text = $(itemElem).find('.price').text().replace('$','');
    return parseFloat(text);
  },
  date: function(itemElem) {
    return new Date($(itemElem).attr('data-date'));
  }
}

Таким образом, Isotope обеспечивает гибкую систему сортировки, способную адаптироваться к любым типам данных, будь то текст, числа, даты или атрибуты.

Практические советы

  • Для числовых значений всегда использовать parseInt или parseFloat.
  • Для динамических атрибутов удобно использовать функции в getSortData.
  • Для комбинированной сортировки задавать массив sortBy.
  • Проверять направление сортировки через sortAscending, особенно при работе с числовыми и текстовыми данными одновременно.

Эти возможности делают Isotope не просто библиотекой для анимации сетки, а полноценным инструментом для организации и управления контентом на страницах любого уровня сложности.

Оглавление