JQuery DataTable - Скрыть строки по назначению

В настоящее время мы работаем над сетевым CRM. Проект идет отлично, за исключением разочаровывающей проблемы.

мы используем плагин DataTable jQuery для почти всех отсортированных таблиц в приложении. Вот список активных инцидентов.

Как вы можете видеть, третий столбец представляет тип инцидентов (билет, запрос на изменение, запрос на обслуживание и т.д.).

Пользователи запросили фильтр, помещенный поверх предыдущей таблицы, для фильтрации типов инцидентов. Например, если вы выберете "Только билет", каждый другой тип будет скрыт. До сих пор все работает.

Чтобы сделать это, каждая строка имеет класс CSS, который представляет тип инцидента.

Строка № 1: class= "билет"
Строка # 2: class= "changeRequest"

При изменении значения поля фильтра выполняется следующий код javascript

$('table.sortable').each(function() {
    for (var i = 0; i < rows.length; i++) {
        if ($(rows[i]).hasClass(vClass)) $(rows[i]).hide();
    }
});

где

vclass= класс CSS, представляющий тип инцидента
rows = Все строки данныхTable, полученные из "$ (SomeDatatable).dataTable(). fnGetNodes();"
$('table.sortable') = Все таблицы данных

Теперь закрепите ремни безопасности (французский лайнер). Когда вы скрытно скрываете строку, dataTable все еще учитывает ее. Вот сказочный результат.

В этом объясняется главный вопрос: Как я должен сообщить dataTable, что я хочу скрыть строки, не удаляя их навсегда? В DataTable уже есть поле фильтра, но мне нужно, чтобы он работал независимо, а также поле фильтра типа (не на изображении).

Есть ли способ добавить второй фильтр, возможно?

Ответ 1

Вам нужно написать настраиваемый фильтр для этой таблицы. Пример:

$.fn.dataTableExt.afnFiltering.push(function (oSettings, aData, iDataIndex) {
    if ($(oSettings.nTable).hasClass('do-exclude-filtering')) {
        return aData[16] == '' || $('#chkShowExcluded').is(':checked');
    } else return true;
});

В этом примере мы динамически добавляем и удаляем класс do-exclude-filtering в таблицу, и если он имеет класс, он проверяет каждую строку, чтобы увидеть, имеет ли данная ячейка значение. Логикой может быть все, что вы можете придумать, просто держите ее быстро (это выполняется для каждой строки в каждой ничьей для каждой таблицы на странице (обратите внимание, что она добавляется в "глобальный" массив в DT, а не в отдельный экземпляр)

Верните true, чтобы включить строку, верните false, чтобы скрыть строку

Вот ссылочная ссылка на использование возможностей afnFiltering: http://datatables.net/development/filtering

Преимущество этого вместо использования .fnFilter() заключается в том, что это работает ALONG WITH, поэтому пользователь все еще может использовать фильтр в правом верхнем углу (по умолчанию я вижу, что ваш снизу справа), чтобы дополнительно фильтровать результаты, которые вы выберите их. Другими словами, скажите, что вы скрываете все "завершенные" элементы, поэтому пользователь видит только "неполные" элементы в таблице. Затем они все еще могут отфильтровать таблицу для "ноутбука" и увидеть только те строки, которые ОБЫШИ неполны и имеют "ноутбук" в описании

Ответ 2

DataTables предлагает это из коробки: Пример таблицы отдельных таблиц с таблицами данных или, еще лучше Пример таблицы отдельных таблиц DataTables (с использованием избранных меню)

Ответ 3

Я не могу помочь с datatable частью, поскольку я никогда не использовал ее, но вы можете улучшить javascript, который вы запускаете, когда коробка фильтра изменится на:

$('.table-sortable').find('tr.' + vClass).removeClass('hidden').addClass('show');
$('.table-sortable').find('tr:not(.' + vClass + ')').removeClass('hidden').addClass('show');

с соответствующим стилем css. Или вы могли бы сделать:

$('.table-sortable').find('tr.' + vClass).show();
$('.table-sortable').find('tr:not(.' + vClass + ')').hide();

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