carduque carduque - 4 years ago 151
Javascript Question

jQuery live filtering, how do I return entire rows when matched?

I'm using the jQuery live filter plugin to make an instant search over a entire table. The plugin works fine but it filters by cell and I'd like to search for an entire row (tr) match instead of just a cell.

HTML:

<h2 class="sub-header">List of Enabled Alarms</h2>
<div id="prefetch">
<input class="typeahead" type="text" placeholder="Alarm name search" id="alarm-search">
</div>
<div class="table-responsive">
<table class="table table-striped" id="alarm-table">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Due Date</th>
<th>Creation Date</th>
<th>Frequency</th>
<th>Enabled</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>60</td>
<td>Alarm dev test</td>
<td>29-12-2015</td>
<td>28-12-2015</td>
<td>ExactTime</td>
<td>Enabled</td>
<td><a href="/alarm/load?id=60" class="btn btn-success" role="button">Edit</a> <a href="/alarm/delete?id=60" class="btn btn-danger" role="button">Delete</a></td>
</tr>
<tr>
<td>61</td>
<td>Testing email</td>
<td>05-01-2016</td>
<td>04-01-2016</td>
<td>ExactTime</td>
<td>Enabled</td>
<td><a href="/alarm/load?id=61" class="btn btn-success" role="button">Edit</a> <a href="/alarm/delete?id=61" class="btn btn-danger" role="button">Delete</a></td>
</tr>
</tbody>
</table>


JAVASCRIPT:

<script type="text/javascript">
$('#alarm-table').liveFilter('#alarm-search', 'tbody tr', {
filterChildSelector: 'tr'
});
</script>


The result of this code is partial row information. If I write
a
it returns all cells that match but not entire rows as I expected. I'd like to search only by column
name
if possible.

Answer Source

As per this plugin you can pass filter funtion for matching elements. So try below code.

<script type="text/javascript">
    $('#alarm-table').liveFilter('#alarm-search', 'tbody tr', {
        filter: function(el, val){
            return $(el).find('td:eq(1)').text().toUpperCase().indexOf(val.toUpperCase()) >= 0;
        }
    });
</script>

Or better if you could give any class name to your cell containing alarm name. In that case your html looks like :

<h2 class="sub-header">List of Enabled Alarms</h2>
            <div id="prefetch">
                <input class="typeahead" type="text" placeholder="Alarm name search" id="alarm-search">
            </div>
      <div class="table-responsive">
        <table class="table table-striped" id="alarm-table">
          <thead>
            <tr>
              <th>Id</th>
              <th>Name</th>
              <th>Due Date</th>
              <th>Creation Date</th>
              <th>Frequency</th>
              <th>Enabled</th>
              <th>Actions</th>
            </tr>
          </thead>
          <tbody>
                <tr>
                    <td>60</td>
                    <td class="alarmName">Alarm dev test</td>
                    <td>29-12-2015</td>
                    <td>28-12-2015</td>
                    <td>ExactTime</td>
                    <td>Enabled</td>
                    <td><a href="/alarm/load?id=60" class="btn btn-success" role="button">Edit</a> <a href="/alarm/delete?id=60" class="btn btn-danger" role="button">Delete</a></td>
                </tr>
                <tr>
                    <td>61</td>
                    <td class="alarmName">Testing email</td>
                    <td>05-01-2016</td>
                    <td>04-01-2016</td>
                    <td>ExactTime</td>
                    <td>Enabled</td>
                    <td><a href="/alarm/load?id=61" class="btn btn-success" role="button">Edit</a> <a href="/alarm/delete?id=61" class="btn btn-danger" role="button">Delete</a></td>
                </tr>
          </tbody>
        </table>

and use below script :

<script type="text/javascript">
    $('#alarm-table').liveFilter('#alarm-search', 'tbody tr', {
        filter: function(el, val){
            return $(el).find('.alarmName').text().toUpperCase().indexOf(val.toUpperCase()) >= 0;
        }
    });
</script>
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download