How to make dropdown list filter for a table using jQuery?

Question

I want to make dropdown table filter in special columns, for example I want to make a filter for the "Married" Column & select yes or or no from the dropdown,this is my table:

this is want I want

I need a jquery code to help me to make the filter.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<table id="table_format" class="table table-bordered table-striped table-hover table-list-search">
  <thead>
    <tr>
      <th>#</th>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Maried</th>
    </tr>
  </thead>
  <tbody id="myTable">
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>yes</td>
    </tr>

    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>no</td>
    </tr>
    <tr>
      <td>1</td>
      <td>Mark</td>
      <td>Otto</td>
      <td>yes</td>
    </tr>
    <tr>
      <td>2</td>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>no</td>
    </tr>
    <tr>
      <td>3</td>
      <td>Larry</td>
      <td>the Bird</td>
      <td>no</td>
    </tr>
  </tbody>
</table>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="js/filter.js"></script>

jmoreno · Accepted Answer · 2016-10-31 18:37:53Z

Try this - uses a regex and jQuery filter function to filter the results based on the select list onchange (using an added class to the tr's to control display). This can also be used in a text input version to live filter any of the table rows for any content so that you can type in peoples names etc and get the filter function to show only the matching names.

I also put an 'all' option in to show all tr's again (effectively removinmg the filter). Note that it simply hides the non-matching rows, meaning that the striped aspect of the table will not necessarily display as desired, but when I implemented something like this - I also added a function that re-striped the table based on the number of rows and odd / even etc AFTER the filter was applied - thereby re-striping the table display.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Filter</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
	<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
</head>
<body>
     <table id="table_format" class="table table-bordered table-striped table-hover table-list-search">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Married
							<select id='filterText' style='display:inline-block' onchange='filterText()'>
								<option disabled selected>Select</option>
								<option value='yes'>Yes</option>
								<option value='no'>No</option>
								<option value='all'>All</option>
							</select>
							</th>
                        </tr>
                    </thead>
                    <tbody  id="myTable">
                        <tr class="content">
                            <td>1</td>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>yes</td>
                        </tr>
                        
                        <tr class="content">
                            <td>3</td>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>no</td>
                        </tr>
                        <tr class="content">
                            <td>1</td>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>yes</td>
                        </tr>
                        <tr class="content">
                            <td>2</td>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>no</td>
                        </tr>
                        <tr class="content">
                            <td>3</td>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>no</td>
                        </tr>
                    </tbody>
                </table>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

<script>
function filterText()
	{  
		var rex = new RegExp($('#filterText').val());
		if(rex =="/all/"){clearFilter()}else{
			$('.content').hide();
			$('.content').filter(function() {
			return rex.test($(this).text());
			}).show();
	}
	}
	
function clearFilter()
	{
		$('.filterText').val('');
		$('.content').show();
	}
</script>
</body>
</html>

Ramon Fincken · Accepted Answer · 2021-10-19 09:13:55Z

0

You might also like this jQuery solution: https://www.jqueryscript.net/table/Simple-jQuery-Dropdown-Table-Filter-Plugin-ddtf-js.html

jQuery( '#mytableid' ).ddTableFilter();

It is an old script, but still work on jquery version 3.6.0

answered Oct 19, 2021 at 9:13

Ramon Fincken

3011 gold badge5 silver badges11 bronze badges

Collectives™ on Stack Overflow

How to make dropdown list filter for a table using jQuery?

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related