CODEWITHSUNDEEP
javascriptjqueryhtml
cookeemonster27
cookeemonster27

Reputation: 23

Jquery dropdown filter for tables

I'm using a code that I also found here that filters a table based on a dropdown selection. I'm not well-versed with JQuery/Javascript. My Question is how can I "show all" the data using this code snippet:

dropdown:

$(document).ready(function($) {
  $('#selectField').change(function() {
    var selection = $(this).val();
    var dataset = $('table').find('tr');
    dataset.show();
    dataset.filter(function(index, item) {
      return $(item).find('td:nth-child(1)').text().split(',').indexOf(selection) === -1;
    }).hide();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id='selectField'>
  <option value=" "> Show All </option>
  <option value="Done"> Done </option>
  <option value="On-going"> On-going</option>
  <option value="Not yet started"> Not yet started </option>
</select>

<table border="2">


  <tr>
    <td>Done</td>
  </tr>
  <tr>
    <td>On-going</td>
  </tr>
  <tr>
    <td>Done</td>
  </tr>
  <tr>
    <td>Not yet started</td>
  </tr>
  <tr>
    <td>Not yet started</td>
  </tr>

</table>

Upvotes: 0

Views: 176

Answers (2)

Komang Ariana
Komang Ariana

Reputation: 66

The solution is to avoid search action when selection is same value as "Show all" option which is " "

I've updated the jQuery code as below, and it works : 

$(document).ready(function($) {
  $('#selectField').change(function() {
    var selection = $(this).val();
    var dataset = $('table').find('tr');
    dataset.show();
    dataset.filter(function(index, item) {
      if (selection !== ' ') {
        return $(item).find('td:nth-child(1)').text().split(',').indexOf(selection) === -1;
      }
    }).hide();
  });
});

Upvotes: 0

Kiran Shinde
Kiran Shinde

Reputation: 5982

You can check the value of dropdown and then filter it

like

$(document).ready(function($) {
  $('#selectField').change(function() {
  var selection = $(this).val();
  var dataset = $('table').find('tr');
  var unSelectedData;
  dataset.show();
  if (selection !== ' ') {
    var unSelectedData = dataset.filter(function(index, item) {
      return $(item).find('td:nth-child(1)').text().split(',').indexOf(selection) === -1;
    })
  }
  if (unSelectedData) {
     unSelectedData.hide();
  }
});
});


$(document).ready(function($) {
  $('#selectField').change(function() {
    var selection = $(this).val();
    var dataset = $('table').find('tr');
    var unSelectedData;
    dataset.show();
    if (selection !== ' ') {
    var unSelectedData= dataset.filter(function(index, item) {
      return $(item).find('td:nth-child(1)').text().split(',').indexOf(selection) === -1;
    })
    }
    if (unSelectedData) {
      unSelectedData.hide();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id='selectField'>
  <option value=" "> Show All </option>
  <option value="Done"> Done </option>
  <option value="On-going"> On-going</option>
  <option value="Not yet started"> Not yet started </option>
</select>

<table border="2">


  <tr>
    <td>Done</td>
  </tr>
  <tr>
    <td>On-going</td>
  </tr>
  <tr>
    <td>Done</td>
  </tr>
  <tr>
    <td>Not yet started</td>
  </tr>
  <tr>
    <td>Not yet started</td>
  </tr>

</table>

Upvotes: 1

Related Questions