JQuery показать/скрыть строки на основе фильтра

Question

Предисловие:

Я работаю на функцию, чтобы позволить пользователю выбирать точки данных для фильтрации таблицы. Каждая строка таблицы имеет три связанных с ней атрибута: Title, Department и Location.

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

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

Проблема:

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

То, что я пробовал:

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

Идеальное решение:

Ищет способ, чтобы очистить эту функцию, где он применяет логику фильтра все сразу, а не в порядке вызова функции. Если я выберу Austin в качестве своего местоположения, он отобразит строки, которые имеют атрибут location=austin. Если я затем выберем department в фильтрах, ему нужно будет применить как расположение, так и фильтр отдела к таблице.

Пример кода:

// Filters our user groups based on selections 
function filterUserGroups(){ 

    // Define our vars 
    var locationsFilter = $('[name=in_ugLocationsFilter]').val(), 
     departmentsFilter = $('[name=in_ugDepartmentsFilter]').val(), 
     titlesFilter = $('[name=in_ugTitlesFilter]').val(), 
     tempLocation = '', 
     tempDepartment = '', 
     tempTitle = ''; 

    // Loop over our rows and show the data that matches our filters 
    $('[name=userGroupsRows] tr').hide(); 
    $('[name=userGroupsRows] tr').each(function(){ 

    // Get the current vars of each row 
    tempLocation = $(this).data('location'); 
    tempDepartment = $(this).data('department'); 
    tempTitle = $(this).data('title'); 

    // Do we have any filter options selected? 
    if(locationsFilter || departmentsFilter || titlesFilter){ 

     // If the location is in our filter, show row 
     if(jQuery.inArray(tempLocation, locationsFilter) != -1) { 
     $(this).show(); 
     } 
     // If the departmentis in our filter, show row 
     if(jQuery.inArray(tempDepartment, departmentsFilter) != -1) { 
     $(this).show(); 
     } 
     // If the title is in our filter, show row 
     if(jQuery.inArray(tempTitle, titlesFilter) != -1) { 
     $(this).show(); 
     } 
    } 
    }) 
} 

Fiddle: https://jsfiddle.net/p4xvgLo1/1/

Answer 1

Редакция: Попробуйте с этим:

var show = false; 
if (locationsFilter) { 
    if (jQuery.inArray(tempLocation, locationsFilter) != -1) { 
    show = true; 
    } 
} 
if (!show && departmentsFilter) { 
    if (jQuery.inArray(tempDepartment, departmentsFilter) != -1) { 
    show = true; 
    } 
} 
if (!show && titlesFilter) { 
    if (jQuery.inArray(tempTitle, titlesFilter) != -1) { 
    show = true; 
    } 
} 
if (show) $(this).show(); 

Смотрите отредактированную скрипку: https://jsfiddle.net/p4xvgLo1/7/

Answer 2

Поскольку вы скрываете все, что я бы добавил, добавьте чек, чтобы, если все фильтры пустые, все отображается (locationsFilter==null && departmentsFilter==null && titlesFilter==null), а затем я бы изменил data-department="Global Financial Services 2", чтобы не было места, так что это то же самое, что и имя фильтра: data-department="Global Financial Services2".

if (locationsFilter || departmentsFilter || titlesFilter) { 
    // If the location is in our filter, show row 
    if (jQuery.inArray(tempLocation, locationsFilter) != -1 || (locationsFilter==null&&departmentsFilter==null&&titlesFilter==null)) { 
     $(this).show(); 
    } 
    // If the location is in our filter, show row 
    if (jQuery.inArray(tempDepartment, departmentsFilter) != -1|| (locationsFilter==null&&departmentsFilter==null&&titlesFilter==null)) { 
     $(this).show(); 
    } 
    // If the location is in our filter, show row 
    if (jQuery.inArray(tempTitle, titlesFilter) != -1|| (locationsFilter==null&&departmentsFilter==null&&titlesFilter==null)) { 
     $(this).show(); 
    } 

Edited скрипка: https://jsfiddle.net/3c3vjfhz/1/