How can you apply filtering to a table using jQuery or AngularJS?

Question

How can you apply filtering to a table using jQuery or AngularJS?

I am looking to implement a filtering system for my table. The table structure is as follows:

name   |    date     |   agencyID
test      2016-03-17     91282774
test      2016-03-18     27496321

My goal is to have a dropdown menu containing all the 'agencyID' values, and when a specific ID is selected, only display the table rows with that corresponding agencyID. I already have a search functionality using an input type text.

The current search function operates like this, but I would like to achieve similar results using a select dropdown:

(function ($) {

    $('#filter').keyup(function () {

        var rex = new RegExp($(this).val(), 'i');
        $('.searchable tr').hide();
        $('.searchable tr').filter(function () {
            return rex.test($(this).text());
        }).show();

    })

}(jQuery));

I am open to exploring the possibility of utilizing angularJS if it offers a more efficient solution

javascript jquery angularjs

Answer 1

Answer №1

Make sure to include a change handler on the select dropdown.

Here is the HTML code:

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

<select id="filter">
  <option value="">Choose a filter</option>
  <option value="1231423424">1231423424</option>
  <option value="456456e54">456456e54</option>
  <option value="123488745">123488745</option>
</select>

<table id="searchable">
  <tr>
    <th>name</th>
    <th>date</th>
    <th>agencyID</th>
  </tr>
  <tr>
    <td>test 1</td>
    <td>date 1</td>
    <td>1231423424</td>
  </tr>
  <tr>
    <td>test 2</td>
    <td>date 2</td>
    <td>456456e54</td>
  </tr>
  <tr>
    <td>test 3</td>
    <td>date 3</td>
    <td>456456e54</td>
  </tr>
  <tr>
    <td>test 4</td>
    <td>date 4</td>
    <td>123488745</td>
  </tr>
  <tr>
    <td>test 5</td>
    <td>date 5</td>
    <td>123488745</td>
  </tr>
</table>

Javascript code:

$(document).ready(function(){

    $('#filter').change(function(){

    var filterValue = $(this).val();
    if(filterValue==""){
        $("#searchable tr").show();
    } else{
      $("#searchable tr").hide();
      $("#searchable td:nth-child(3)").each(function(){
        if( $(this).text() == filterValue){
          $(this).parent().show();
        }
      });
    }
  });

});

View it in fiddle

Answer 2

Make sure to include a change handler on the select dropdown.

Here is the HTML code:

<script src="//code.jquery.com/jquery-1.12.0.min.js"></script>

<select id="filter">
  <option value="">Choose a filter</option>
  <option value="1231423424">1231423424</option>
  <option value="456456e54">456456e54</option>
  <option value="123488745">123488745</option>
</select>

<table id="searchable">
  <tr>
    <th>name</th>
    <th>date</th>
    <th>agencyID</th>
  </tr>
  <tr>
    <td>test 1</td>
    <td>date 1</td>
    <td>1231423424</td>
  </tr>
  <tr>
    <td>test 2</td>
    <td>date 2</td>
    <td>456456e54</td>
  </tr>
  <tr>
    <td>test 3</td>
    <td>date 3</td>
    <td>456456e54</td>
  </tr>
  <tr>
    <td>test 4</td>
    <td>date 4</td>
    <td>123488745</td>
  </tr>
  <tr>
    <td>test 5</td>
    <td>date 5</td>
    <td>123488745</td>
  </tr>
</table>

Javascript code:

$(document).ready(function(){

    $('#filter').change(function(){

    var filterValue = $(this).val();
    if(filterValue==""){
        $("#searchable tr").show();
    } else{
      $("#searchable tr").hide();
      $("#searchable td:nth-child(3)").each(function(){
        if( $(this).text() == filterValue){
          $(this).parent().show();
        }
      });
    }
  });

});

View it in fiddle

Answer 3

Answer №2

Check out this different approach utilizing the :contains() selector:

$select.on('change', function(){
    $('.highlight').removeClass('highlight');
    var id = $(this).val();
    $('table').find("tr:contains('"+id+"')").addClass('highlight');
  });

View the live example here

Answer 4

Check out this different approach utilizing the :contains() selector:

$select.on('change', function(){
    $('.highlight').removeClass('highlight');
    var id = $(this).val();
    $('table').find("tr:contains('"+id+"')").addClass('highlight');
  });

View the live example here

Answer 5

Answer №3

you have the option to assign an id to tr representing the agency

<select id="select">
<option value=""></option>
<option value="91282774">91282774</option>
<option value="27496321">27496321</option>
</select>

<table id="mytable">
<tr><th>name</th><th>data</th><th>agency</th></tr>
<tr id="91282774"><td>test</td><td>2016-03-17</td><td>91282774</td></tr>
<tr id="27496321"><td>test</td><td>2016-03-18</td><td>27496321</td></tr>
</table>

and then search for the id when the selection changes

$(document).ready(function(){

  $("#select").change(function(){
    var value = $(this).val();
    if(value == "")
        $("#mytable tr").show();
    else{
        $("#mytable tr[id=" + value + "]").show();
        $("#mytable tr[id][id!=" + value + "]").hide();
    }
  });

});

fiddle

Answer 6

you have the option to assign an id to tr representing the agency

<select id="select">
<option value=""></option>
<option value="91282774">91282774</option>
<option value="27496321">27496321</option>
</select>

<table id="mytable">
<tr><th>name</th><th>data</th><th>agency</th></tr>
<tr id="91282774"><td>test</td><td>2016-03-17</td><td>91282774</td></tr>
<tr id="27496321"><td>test</td><td>2016-03-18</td><td>27496321</td></tr>
</table>

and then search for the id when the selection changes

$(document).ready(function(){

  $("#select").change(function(){
    var value = $(this).val();
    if(value == "")
        $("#mytable tr").show();
    else{
        $("#mytable tr[id=" + value + "]").show();
        $("#mytable tr[id][id!=" + value + "]").hide();
    }
  });

});

fiddle

How can you apply filtering to a table using jQuery or AngularJS?

Answer №1

Answer №2

Answer №3

Similar questions

AngularJS: Optimizing Image Loading for the Initial Page Load in AngularJS

Updating a dataview inside a Panel in extjs 3.4

Instructions on utilizing module.exports to export an async function

Secure JSON data by transmitting it safely to the front end within a Node.js environment

Tips for updating Angular HTML with data received from Socket.IO

I am unable to access my JavaScript class in Laravel Mix

Can I store a large batch of images in one location and retrieve them using a REST API?

Is it possible to set all UI forms to a readonly/disable mode?

The function dataTable is not recognized as a valid command

Angular.js - index template fails to execute controller, but other templates work flawlessly

What methods can I use to sort content by its rating?

Does this information operate on Vue or Node?

Display WordPress die errors as an alert message

When I try to move my object, it seems to have a mind of its own and flies off the canvas instead of staying where

Retrieve the values from the second dropdown list based on the choices made in the first dropdown menu within a React application

The absence of a key is causing an issue - deletion cannot be completed

The express gateway is unable to transfer multipart/formdata

Organize the HTML output generated by a PHP array

Using Node.js, Express, and Socket.IO to establish real-time communication between two static client pages

Submitting a form triggers the process of uploading images to Firebase