在jQuery中过滤表格？ 或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

Answer 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

Answer 2

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

Answer 3

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