jQuery filter table rows by multiple columns

Question

This is my PHP script to generate the table:

$products = get_db( "SELECT * FROM `products` ORDER BY Data desc" );

echo '<form id="productsEdit" action="actions.php" method="get" />';

echo "<table id='products'>";
    echo "<thead>";
        echo "<tr id='filter_table'>";
            echo "<th class='id'>Cod. prodotto<br><input type='text' class='id' /></th>";
            echo "<th class='articolo'>Articolo<br><input type='text' class='articolo' /></th>";
            echo "<th class='fornitore'>Fornitore<br><input type='text' class='fornitore' /></th>";
            echo "<th class='nome'>Nome<br><input type='text' class='nome' /></th>";
            echo "<th class='taglia'>Taglia<br><input type='text' class='taglia' /></th>";
            echo "<th class='colore'>Colore<br><input type='text' class='colore' /></th>";
            echo "<th class='prezzo_acquisto'>Prezzo acquisto<br><input type='text' class='prezzo_acquisto' /></th>";
            echo "<th class='prezzo_vendita'>Prezzo vendita<br><input type='text' class='prezzo_vendita' /></th>";
            echo "<th class='data'>Data<br><input type='text' class='data' /></th>";
            echo "<th class='q'>Qta<br><input type='text' class='q' /></th>";
            echo "<th class='qA'>QtaA<br><input type='text' class='qA' /></th>";
        echo "</tr>";
    echo "</thead>";
    echo "<tbody>";
    foreach ($products as $product) {
        echo "<tr class='prod_". $product['id'] ."'>";
            echo "<td class='id'>". $product['id'] ."</td>";
            echo "<td class='articolo'>". $product['articolo'] ."</td>";
            echo "<td class='fornitore'>". $product['fornitore'] ."</td>";
            echo "<td class='nome'>". $product['nome'] ."</td>";
            echo "<td class='taglia'>". $product['taglia'] ."</td>";
            echo "<td class='colore'>". $product['colore'] ."</td>";
            echo "<td class='prezzo_acquisto'>". $product['prezzo_acquisto'] ."</td>";
            echo "<td class='prezzo_vendita'>". $product['prezzo_vendita'] ."</td>";
            echo "<td class='data'>". $product['data'] ."</td>";
            echo "<td class='q'>". $product['quantita'] ."</td>";
            echo "<td class='qA'>". $product['qta_acquisto'] ."</td>";
        echo "</tr>";
    }
    echo "</tbody>";
echo "</table>";
echo "</form>";

My jQuery script:

$('#filter_table input').live("keyup", function() {
        var searchStr = $(this).val();
        var column = $(this).attr("class");

        if (searchStr.length > 0) {
            $('tbody > tr').hide();

            $('td.'+ column +':containsNC('+ searchStr +')').each(function(){
               $(this).parent("tr").show();
            });

        } else {
            $('tbody > tr').show();
        }
    });

The filter work only for a column, but it doesn't work when I apply filter on more columns in the same time, such as 'AND' condition between fields of different columns.

Can someone help me?

Man, read up on PHP heredoc syntax and save yourself some agony — Madbreaks
– Madbreaks, Commented Dec 30, 2014 at 19:35

Ram · Accepted Answer · 2014-12-30 20:28:56Z

var $rows = $('tbody > tr'),
    $filters = $('#filter_table input'),
    cache, $m, len, cls;

$filters.on("keyup", function () {
    $m = $filters.filter(function () {
        return $.trim(this.value).length > 0;
    }), len = $m.length;

    if (len === 0) return $rows.show();

    cache = {};
    cls = '.' + $m.map(function () {
        cache[this.className] = $.trim(this.value);
        return this.className;
    }).get().join(',.');

    $rows.hide().filter(function () {
        return $('td', this).filter(cls).filter(function () {
            return this.textContent.indexOf(cache[this.className]) > -1;
        }).length === len;
    }).show();
});

http://jsfiddle.net/k47dkruh/

Note that live method was deprecated in jQuery 1.7 and removed in jQuery 1.9, in the above example I have used the on method. Based on the posed code there is no need to even use event delegation technique, if you are using one of the older versions of jQuery that doesn't have on method use the click method. If you really need to delegate the event use live or the delegate method.

Collectives™ on Stack Overflow

jQuery filter table rows by multiple columns

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related