Сортировка по содержимому элементов

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

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

var $grid = $('.grid').isotope({
  itemSelector: '.grid-item',
  layoutMode: 'fitRows',
  getSortData: {
    title: '.title', // текст внутри элемента с классом .title
    number: function(itemElem) {
      var number = $(itemElem).find('.number').text();
      return parseFloat(number);
    }
  }
});

В этом примере title сортирует элементы по тексту внутри .title, а number — по числовому значению, извлекаемому из .number.

Использование селекторов для текстовой сортировки

Для текстовой сортировки можно указать простой CSS-селектор внутри getSortData. Isotope автоматически извлекает текстовое содержимое и приводит его к строковому виду.

getSortData: {
  category: '.category' // сортировка по тексту внутри .category
}

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

Сортировка числовых значений

Часто содержимое элементов представляет собой числа (цены, рейтинги, количество просмотров). Для корректной сортировки необходимо парсить текст в число с помощью parseInt или parseFloat.

getSortData: {
  price: function(itemElem) {
    var priceText = $(itemElem).find('.price').text();
    return parseFloat(priceText.replace('$', '')); // удаляем символ валюты
  }
}

Функции сортировки могут быть сложными и включать несколько операций: удаление лишних символов, преобразование формата даты или работу с множественными подэлементами.

Сортировка по атрибутам элементов

Isotope позволяет сортировать элементы не только по тексту, но и по любым атрибутам HTML. Например, сортировка по data- атрибуту:

getSortData: {
  rating: '[data-rating] parseInt'
}

Здесь [data-rating] указывает селектор атрибута, а parseInt сообщает Isotope, что значение нужно интерпретировать как число. Такой подход позволяет легко интегрировать сортировку с динамическими данными.

Сложные функции сортировки

Иногда требуется сортировка по нескольким критериям одновременно. В getSortData можно определить несколько ключей, а при вызове метода arrange указывать приоритет:

$grid.isotope({
  sortBy: ['category', 'price'],
  sortAscending: {
    category: true,
    price: false
  }
});

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

Работа с динамическим содержимым

Если содержимое элементов изменяется после инициализации Isotope (например, текст или атрибуты обновляются через AJAX), необходимо перезапустить сортировку:

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

Метод updateSortData пересчитывает значения всех элементов для текущих ключей сортировки. Это гарантирует корректный порядок при динамических изменениях данных.

Применение сортировки в пользовательских интерфейсах

Для реализации интерактивной сортировки по содержимому элементов часто используют кнопки или селекты. Пример с кнопками:

$('.sort-button-group').on('click', 'button', function() {
  var sortValue = $(this).attr('data-sort-value');
  $grid.isotope({ sortBy: sortValue });
});

Каждая кнопка содержит атрибут data-sort-value, соответствующий ключу из getSortData. Такой подход обеспечивает гибкую и понятную сортировку элементов на странице.

Важные нюансы

  • Чувствительность к регистру: Текстовая сортировка по умолчанию чувствительна к регистру. Для корректного порядка лучше приводить текст к нижнему регистру внутри функции сортировки:
getSortData: {
  name: function(itemElem) {
    return $(itemElem).find('.name').text().toLowerCase();
  }
}

  • Обработка пустых значений: Пустой текст или отсутствующий атрибут может нарушить сортировку. Рекомендуется возвращать значения по умолчанию, например 0 для чисел или пустую строку для текста.

  • Оптимизация больших наборов: Для сотен и тысяч элементов рекомендуется минимизировать DOM-операции внутри функций сортировки. Использование кэширования или прямого обращения к атрибутам повышает производительность.

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

Оглавление