Jquery dropdown filter for tables

Question

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:

Show All
Done
On-going
Not yet started

$(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>

can you add the html

Akhil Aravind
– Akhil Aravind

2020-03-04 07:23:20 +00:00
Commented Mar 4, 2020 at 7:23 — Akhil Aravind
– Akhil Aravind, Commented Mar 4, 2020 at 7:23
@AkhilAravind hi I added the html

cookeemonster27
– cookeemonster27

2020-03-04 07:43:51 +00:00
Commented Mar 4, 2020 at 7:43 — cookeemonster27
– cookeemonster27, Commented Mar 4, 2020 at 7:43

Kiran Shinde · Accepted Answer · 2020-03-04 07:54:46Z

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>

Komang Ariana · Accepted Answer · 2020-03-04 08:00:58Z

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

Collectives™ on Stack Overflow

Jquery dropdown filter for tables

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related