2

I am working on a Table Row filtering script.

Initially, the all table rows are visible, but after manipulating some dropdowns / forms the filter criteria dictate which rows are going to be visible and which not. Example:

var jobs = [{
  id: 0,
  company: "Google",
  location: "Zurich"
}, {
  id: 1,
  company: "Facebook",
  location: "Ireland"
}];

// this function isn't run in this example for reasons of brevity. it's to show how the jobs array is generated
const filterRow = function (data, filters) {
  let filtersEnabled = Object.keys(filters).filter(element => filters[element].length !== 0);
  return data.filter(row => {
    return filtersEnabled.every(k => {
      return filters[k].indexOf(row[k]) !== -1
    })
  })
}

let $tableRows = $('table tbody tr');

const updateDisplay = function() {
  // that's not ideal
  $tableRows.addClass('hidden')
  jobs.forEach((row) => {
    $(`[data-id="${row.id}"]`).removeClass('hidden')
  })
}

$('.js-filter').on('click', () => updateDisplay())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button class="js-filter">filter table now</button>
<table class="table table-bordered">
  <tbody>
    <tr data-company="google" data-id="0" data-loation="zurich">
      <td>Google</td>
      <td>Zurich</td>
      <td>0</td>
    </tr>
    <tr data-company="facebook" data-id="1" data-loation="ireland">
      <td>Facebook</td>
      <td>Ireland</td>
      <td>1</td>
    </tr>
    <tr data-company="microsoft" data-id="2" data-loation="california">
      <td>microsoft</td>
      <td>California</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

The jobs array determines which rows are going to be visible. (so in this particular case, only rows with id 0 and 1 are going to be visible.

Given that the jobs array is changing programmatically, I would like a jQuery (or other) way to directly hide the rows with ID not present in the array (thus being able to use animate.css to fade rows out etc.

What I currently do is

  1. hiding all rows,
  2. then showing the ones in the array. That's rather a workaround and it complicates my transitions/animations.

1 Answer 1

1

You can use the jQuery .filter() method to iterate over the rows and filter them.

On each iteration you can check to see if the row's data-id attribute is found in the jobs array by using the .some() method. From there, you can return the boolean and filter out rows that have an id that matches an object in the jobs array.

$rows.filter((index, row) => {
  return !jobs.some(job => job.id === +row.dataset.id);
}).addClass('hidden');

Alternatively, you could also use the jQuery .not() method in place of .filter():

$rows.not((index, row) => {
  return jobs.some(job => job.id === +row.dataset.id);
}).addClass('hidden');

Or if you want to break isJobById into another function:

const isJobById = id => jobs.some(job => job.id === +id);
const updateDisplay = () => {
  $rows.not((i, row) => isJobById(row.dataset.id)).addClass('hidden');
}

You can also change the following line:

$('.js-filter').on('click', () => updateDisplay());

.. and pass the updateDisplay function directly:

$('.js-filter').on('click', updateDisplay);

Full snippet:

var jobs = [{
  id: 0,
  company: "Google",
  location: "Zurich"
}, {
  id: 1,
  company: "Facebook",
  location: "Ireland"
}];

let $rows = $('table tbody tr');
const isJobById = id => jobs.some(job => job.id === +id);
const updateDisplay = () => {
  $rows.not((i, row) => isJobById(row.dataset.id)).addClass('hidden');
}

$('.js-filter').on('click', updateDisplay);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<button class="js-filter">filter table now</button>
<table class="table table-bordered">
  <tbody>
    <tr data-company="google" data-id="0" data-loation="zurich">
      <td>Google</td>
      <td>Zurich</td>
      <td>0</td>
    </tr>
    <tr data-company="facebook" data-id="1" data-loation="ireland">
      <td>Facebook</td>
      <td>Ireland</td>
      <td>1</td>
    </tr>
    <tr data-company="microsoft" data-id="2" data-loation="california">
      <td>microsoft</td>
      <td>California</td>
      <td>2</td>
    </tr>
  </tbody>
</table>

2
  • thanks, works, accepted, but two questions: 1/ could we use .not() for this and simplify it? I'm actually running another loop which generates the jobs array so wondering if I could do it directly there?.. (check updated question) 2/ is there any way we can use "===" instead of "==" ? I know the id is a number and not a string.. Feb 12, 2017 at 8:14
  • @GeorgeKatsanos - Okay, I added an example using the .not() method. I'm not sure what data you're passing to the filterRow function, so I am not sure about that... For 2), I updated it to use ===. The reason I was initially using == is because the data attributes were returning a string, (i.e., typeof row.dataset.id was string). I just added a + before the attribute value to coerce it into a number. Feb 12, 2017 at 18:19

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.