Filter table in jQuery? or angularJS

Question

I want to be able to filter my table, the table is like this

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

I want to be able to have a dropdown with all the 'agencyID' and when I select it only show the table rows with this agencyID in. I have a similar thing where you can search for anything in a input type text.

This is how that part works, is there any similar way I can do this with 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 implementing angularJS if this is a better alternative

Is the rest your app already written in AngularJS? If so, yes, rewrite this as an AngularJS filter (and generally avoid depending on jQuery.) If not, then no, it wouldn't make sense to add Angular just for this one filter. — Daniel Beck
– Daniel Beck, Commented Mar 17, 2016 at 15:41

Ji_in_coding · Accepted Answer · 2016-03-17 15:38:13Z

1

you can do an on change handler on the select drop down.

html:

<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:

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

});

See it in fiddle

answered Mar 17, 2016 at 15:38

Ji_in_coding

1,7011 gold badge14 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Kieron606 Over a year ago

Thank you, the fiddle was really useful.

Yuri · Accepted Answer · 2016-03-17 15:52:32Z

0

Here is another implementation using :contains() selector

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

Fiddle here

answered Mar 17, 2016 at 15:52

Yuri

3,3043 gold badges30 silver badges48 bronze badges

Comments

user3401335 · Accepted Answer · 2016-03-17 15:58:26Z

you can add to tr an id that is 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 search the id when change the selection

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

Collectives™ on Stack Overflow

Filter table in jQuery? or angularJS

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related