Сортировка по data-атрибутам

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

Подготовка HTML с data-атрибутами

Для сортировки по data-атрибутам необходимо добавить соответствующие атрибуты к каждому элементу сетки. Например, если требуется сортировать карточки товаров по цене и рейтингу, HTML может выглядеть следующим образом:

<div class="grid">
  <div class="grid-item" data-price="120" data-rating="4.5">Товар A</div>
  <div class="grid-item" data-price="80" data-rating="3.9">Товар B</div>
  <div class="grid-item" data-price="200" data-rating="4.8">Товар C</div>
  <div class="grid-item" data-price="150" data-rating="4.2">Товар D</div>
</div>

Важные моменты:

  • data-price и data-rating содержат числовые значения для сортировки.
  • Любые другие атрибуты, например data-name или data-date, также могут использоваться для сортировки.

Инициализация Isotope с сортировкой по data-атрибутам

Для работы с сортировкой нужно указать getSortData при инициализации Isotope. В нём определяется, какие свойства использовать для сортировки:

var iso = new Isotope('.grid', {
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
  getSortData: {
    price: '[data-price] parseInt',
    rating: '[data-rating] parseFloat'
  },
  sortAscending: {
    price: true,
    rating: false
  }
});

Ключевые моменты настройки:

  • itemSelector указывает, какие элементы участвуют в сетке.
  • layoutMode отвечает за способ компоновки (fitRows, masonry, vertical, и др.).
  • В getSortData можно указывать CSS-селектор с data-атрибутом, а также функцию преобразования, например parseInt или parseFloat, для корректной работы с числами.
  • sortAscending позволяет задать направление сортировки для каждого свойства: true – по возрастанию, false – по убыванию.

Сортировка элементов динамически

Для изменения порядка элементов после инициализации используется метод arrange:

// Сортировка по цене по возрастанию
iso.arrange({ sortBy: 'price' });

// Сортировка по рейтингу по убыванию
iso.arrange({ sortBy: 'rating' });

Можно комбинировать несколько критериев через массив:

iso.arrange({
  sortBy: ['rating', 'price']
});

В этом случае Isotope сначала сортирует элементы по рейтингу, а если рейтинги равны, применяется сортировка по цене.

Использование функций для сложной логики сортировки

Иногда требуется сортировать по значениям, которые нельзя напрямую извлечь из data-атрибутов, или выполнять более сложные вычисления. Для этого в getSortData можно задавать функцию:

getSortData: {
  priceCategory: function(itemElem) {
    var price = parseInt(itemElem.getAttribute('data-price'), 10);
    if (price < 100) return 1;
    if (price < 150) return 2;
    return 3;
  }
}

Эта функция создаёт виртуальные категории для сортировки, например, дешёвые, средние и дорогие товары.

Сортировка по строковым значениям

Data-атрибуты могут содержать не только числа, но и строки. Для строковых данных можно использовать простое указание атрибута:

getSortData: {
  name: '[data-name]'
}

Isotope автоматически сортирует строки по алфавиту. Для сложной сортировки строк, например с учётом регистра, можно применить функцию:

getSortData: {
  nameInsensitive: function(itemElem) {
    return itemElem.getAttribute('data-name').toLowerCase();
  }
}

Обновление data-атрибутов на лету

Data-атрибуты можно менять динамически через JavaScript, после чего нужно вызвать updateSortData:

var item = document.querySelector('.grid-item');
item.setAttribute('data-price', '180');

// Обновление информации для сортировки
iso.updateSortData(item);

// Применение новой сортировки
iso.arrange({ sortBy: 'price' });

Без вызова updateSortData Isotope будет использовать старое значение атрибута.

Советы по использованию

  • Для числовых значений всегда использовать parseInt или parseFloat, иначе сортировка может работать некорректно.
  • Если элементы могут добавляться динамически, сразу вызывать iso.appended(newElements) и затем updateSortData.
  • Комбинированная сортировка помогает создавать гибкие интерфейсы: сначала по важному критерию, потом по второстепенному.
  • Для больших сеток использование числовых data-атрибутов быстрее и эффективнее, чем сортировка по тексту.

Использование data-атрибутов в сочетании с Isotope обеспечивает удобный и расширяемый способ управления сортировкой, позволяя хранить данные прямо в HTML и динамически обновлять порядок элементов без сложных манипуляций с DOM.

Оглавление