Сортировка и фильтрация динамических данных в таблице с помощью JavaScript

Создание настраиваемой многоразовой функции сортировки на простом JavaScript

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

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

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

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

Чтобы не усложнять задачу, реализация будет:

быть закодированным в одном файле
использовать макет синтетических данных

В реальных случаях вместо этого вам следует разделять HTML, CSS и JavaScript на разные файлы. Кроме того, данные должны быть получены с помощью некоторой формы вызова API, а не жестко закодированы в файл.

Реализация

Создайте новый файл с именем app.html в вашем рабочем каталоге.

HTML

Добавьте в файл следующий код и сохраните его:

Код содержит следующее:

метаданные и внешняя таблица стилей Font-Awesome для значков стрелок
простые стили CSS для таблицы
ввод и таблица с несколькими заголовками

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

Инициализация переменных

Давайте продолжим инициализацию следующих объектов Element внутри тега script:

var table = document.getElementById('mytable');
var input = document.getElementById('myinput');

Затем создайте синтетический массив объектов в качестве данных для наших данных.

var tableData = [
{name: 'Onion', quantity: 29, price: 1.2, expiry: '2021-09-12'}, {name: 'Apple', quantity: 55, price: 3.3, expiry: '2021-09-22'}, {name: 'Potato', quantity: 25, price: 2.5, expiry: '2021-09-18'}, {name: 'Carrot', quantity: 8, price: 0.8, expiry: '2021-09-25'}
];

Каждый объект содержит следующие поля:

имя (строка)
количество (целое)
цена (плавающая)
срок действия (формат даты в строке)

Продолжите, определив следующие переменные, которые служат ссылками для переключения между стрелками вверх и вниз при сортировке таблицы:

var caretUpClassName = 'fa fa-caret-up';
var caretDownClassName = 'fa fa-caret-down';

Функция сортировки

Уловка для сортировки таблицы заключается в следующем:

очистить все строки в таблице
отсортировать массив данных
перебрать каждый элемент в массиве данных и добавить его как строку в таблицу

В JavaScript у массива есть собственная встроенная функция сортировки, которая сортирует элемент и возвращает новый массив. Кроме того, он принимает дополнительную функцию сравнения, которая определяется следующим образом:

«… Функция, определяющая порядок сортировки. Если он не указан, элементы массива преобразуются в строки, а затем сортируются в соответствии со значением кодовой точки Юникода каждого символа ». - Mozilla

Давайте реализуем функцию многоразовой сортировки на основе одного из рекомендуемых ответов от Stack Overflow:

Эта функция работает с любым типом данных и может вызываться следующим образом:

// assuming that data is an array
data.sort(sort_by('price', true));

Очистить функцию значка

После этого создайте новую функцию с именем clearArrow под функцией сортировки. Он в основном отвечает за очистку всех значков стрелок рядом с заголовками таблицы.

Переключить функцию значка

Впоследствии добавьте следующую функцию для переключения значка стрелки при щелчке по заголовку:

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

Затем он очистит все значки стрелок из заголовков и определит используемый значок. Если значок представляет собой стрелку вверх, он изменится на стрелку вниз и установит флаг reverse на false. В противном случае он будет установлен на стрелку вверх, а флаг reverse на true.

Затем он отсортирует массив данных, передав соответствующее поле и обратную переменную.

Функция заполнения таблицы данными

Наконец, вызовите функцию populateTable, которая реализована следующим образом:

Концепция функции populateTable довольно проста. Во-первых, очистите весь базовый текст HTML.

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

Функция фильтрации данных таблицы

Наконец, вызовите функцию filterTable. Эта функция отвечает за фильтрацию таблицы на основе ключевых слов в элементе ввода.

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

получить входное значение
получить все TR элементов в теле таблицы
пройти через все TR элементы и получить базовые TD элементы
выполнить сравнение строк между входным значением и значением textContent внутри каждого TD элемента
изменить CSS элемента TR, чтобы он был скрыт или отображен на основе предыдущего сравнения строк

Слушатели событий

Добавьте последний штрих к файлу с помощью следующего кода:

Он заполнит таблицу при загрузке страницы. Фрагменты кода также добавляют onclick события ко всем заголовкам таблицы. Кроме того, он также добавит onkeyup событий к элементу ввода.

Тестовое задание

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

При перезагрузке страницы вы должны увидеть следующий пользовательский интерфейс:

Сортировать и фильтровать

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

Настройка

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

Оператор break удален, а в код включен условный оператор, который устанавливает желтый цвет фона:

cell.style.backgroundColor = 'yellow';

Следующий gif иллюстрирует внешний вид при фильтрации таблицы:

Вы можете найти полный код по следующей сути:

Заключение

Подведем итоги тому, что вы узнали сегодня.

Эта статья началась с иллюстраций и объяснения ожидаемого результата этого урока.

Затем был рассмотрен процесс внедрения. Он обрисовал в общих чертах базовый шаблонный шаблон HTML, а затем перешел к коду JavaScript.

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

Наконец, он продемонстрировал, как настроить базовую функцию и добавить подсветку фона при фильтрации данных из таблицы.

Спасибо, что прочитали эту статью. Не стесняйтесь проверять мои другие статьи. Удачного дня!