SBB SBB - 1 year ago 71
HTML Question

jQuery show/hide rows based on filter


I am working on a function to allow a user to choose data points to filter a table by. Each table row has 3 attributes associated with it,

, and

There are three multi-select filter options on the page that allow the user to narrow their search down by selecting 1 or more filter options by each of the fields.

As those options are selected, it triggers a function to adjust the table and only show the rows with data that matches their filter.

The Problem:

Since my function contains a loop that checks each of the filter options independently, its hiding/showing rows in order which is causing problems. For example if it was supposed to show the first row in the table because the filter told it to, the next filter says to only show rows that matches its filter, ignoring the ones before it.

What I have Tried:

I attempted to build the function in a way where it hides all the rows to start and then if the attribute of the table row was contained in our filter, it shows the row. This works for the first filter but as it iterates over the rows and hits the other filters, it hides them when it shouldn't be.

Ideal Solution:

Looking for a way to clean up this function where it applies the filter logic all at once and not in order by the function call. If I choose
as my location, it will show rows that have the attribute
. If I then select a
in the filters, it needs to apply both the location and department filter to the table.

Code Sample:

// 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) {
// If the departmentis in our filter, show row
if(jQuery.inArray(tempDepartment, departmentsFilter) != -1) {
// If the title is in our filter, show row
if(jQuery.inArray(tempTitle, titlesFilter) != -1) {


Answer Source

EDITED: Try with this:

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();

See the edited fiddle:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download