jQuery Table Row Filtering by Column

Question

I'm trying to filter table rows in an intelligent way (as opposed to just tons of code that get the job done eventually) but a rather dry of inspiration.

I have 5 columns in my table. At the top of each there is either a dropdown or a textbox with which the user may filter the table data (basically hide the rows that don't apply)

There are plenty of table filtering plugins for jQuery but none that work quite like this, and thats the complicated part :|

Solution 1

Here is a basic filter example http://jsfiddle.net/urf6P/3/

It uses the jquery selector :contains('some text') and :not(:contains('some text')) to decide if each row should be shown or hidden. This might get you going in a direction.

EDITED to include the HTML and javascript from the jsfiddle:

$(function() {    
    $('#filter1').change(function() { 
        $("#table td.col1:contains('" + $(this).val() + "')").parent().show();
        $("#table td.col1:not(:contains('" + $(this).val() + "'))").parent().hide();
    });

});

Solution 2

Slightly enhancing the accepted solution posted by Jeff Treuting, filtering capability can be extended to make it case insensitive. I take no credit for the original solution or even the enhancement. The idea of enhancement was lifted from a solution posted on a different SO post offered by Highway of Life.

Here it goes:

// Define a custom selector icontains instead of overriding the existing expression contains
// A global js asset file will be a good place to put this code
$.expr[':'].icontains = function(a, i, m) {
  return $(a).text().toUpperCase()
      .indexOf(m[3].toUpperCase()) >= 0;
};

// Now perform the filtering as suggested by @jeff
$(function() {    
    $('#filter1').on('keyup', function() {  // changed 'change' event to 'keyup'. Add a delay if you prefer
        $("#table td.col1:icontains('" + $(this).val() + "')").parent().show();  // Use our new selector icontains
        $("#table td.col1:not(:icontains('" + $(this).val() + "'))").parent().hide();  // Use our new selector icontains
    });

});

Solution 3

This may not be the best way to do it, and I'm not sure about the performance, but an option would be to tag each column (in each row) with an id starting with a column identifier and then a unique number like a record identifier.

For example, if you had a column Produce Name, and the record ID was 763, I would do something like the following:

​​<table id="table1">
    <thead>
        <tr>
            <th>Artist</th>
            <th>Album</th>
            <th>Genre</th>
            <th>Price</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td id="artist-127">Red Hot Chili Peppers</td>
            <td id="album-195">Californication</td>
            <td id="genre-1">Rock</td>
            <td id="price-195">$8.99</td>
        </tr>
        <tr>
            <td id="artist-59">Santana</td>
            <td id="album-198">Santana Live</td>
            <td id="genre-1">Rock</td>
            <td id="price-198">$8.99</td>
        </tr>
        <tr>
            <td id="artist-120">Pink Floyd</td>
            <td id="album-183">Dark Side Of The Moon</td>
            <td id="genre-1">Rock</td>
            <td id="price-183">$8.99</td>
        </tr>
    </tbody>
</table>

You could then use jQuery to filter based on the start of the id.

For example, if you wanted to filter by the Artist column:

var regex = /Hot/;
$('#table1').find('tbody').find('[id^=artist]').each(function() {
    if (!regex.test(this.innerHTML)) {
        this.parentNode.style.backgroundColor = '#ff0000';
    }
});