jQuery - Filtering table using data attributes

Question

I am trying to filter this table by data attributes, you can find it here:

I managed to get the value of the inputs with text using

$filters.on("keyup", function () {
    var $i = $filters.filter(function () {
        console.log(this.value);
        return $.trim(this.value).length > 0;
    })
});

Also was able to get data atributes of those input:

var datattrbs = $i.map(function () {
        console.log($(this).val());
        return $(this).data('column')
    }).get().join(',');

The idea is to hide the rows which does not match all criteria on inputs, filtering by data attributes.

Right now I am stuck on this portion:

$rows.hide().filter(function () {
        return $('td', this).filter('td[data-column='+datattrbs+']').filter(function () {
            var content = this.textContent;

            var inputVal = $i.filter($(this).data("column")).val();
            return content.indexOf(inputVal) > -1;

        }).length === len;
    }).show();

UPDATE I have managed to solve most issues, except filtering by many data attributes:

http://jsfiddle.net/vdbo47xv/

how can I filter by comma separated list: filter('td[data-column=id,articolo]')? is it possible?

@Stormcloak I have added the portion of code I am stuck, can you help? — Eduardo
– Eduardo, Commented Feb 1, 2018 at 18:21

Emre Kabaoglu · Accepted Answer · 2018-02-01 19:36:03Z

You should change these parts in the code.

var inputVal = $i.filter($(this).data("column")).val();

to

$i.val(); // Get the value of typed value of input

and

$('td[data-column*=' + "id" + ']', this)

to

$('td[data-column=' + $i.attr("data-column") + ']', this) // Get the related data column

Complete code looks like;

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

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

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

    $rows.hide().filter(function () {
        return $('td', this).filter('td[data-column='+ $i.attr("data-column") +']').filter(function () {
			var content = this.textContent;
			var column_info = $(this).data("column");
			var inputVal = $i.filter('input[data-column='+column_info+']').val();
			var values = inputVal.split(',');
			var result = false;
			for (index = 0; index < values.length; ++index) {
        if(values[index] == "") continue;
			  result = content.indexOf(values[index]) > -1;
			  if(result == true)
			  {
				 break;
			  }
			}
			return result;
        }).length === len;
    }).show();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id='products'>
    <thead>
        <tr id='filter_table'>
            <th data-column='id'>Cod. prodotto
                <br>
                <input type='text' data-column='id' />
            </th>
            <th data-column='articolo'>Articolo
                <br>
                <input type='text' data-column='articolo' />
            </th>
            <th data-column='fornitore'>Fornitore
                <br>
                <input type='text' data-column='fornitore' />
            </th>
            <th data-column='nome'>Nome
                <br>
                <input type='text' data-column='nome' />
            </th>
            <th data-column='taglia'>Taglia
                <br>
                <input type='text' data-column='taglia' />
            </th>
            <th data-column='colore'>Colore
                <br>
                <input type='text' data-column='colore' />
            </th>
            <th data-column='prezzo_acquisto'>Prezzo acquisto
                <br>
                <input type='text' data-column='prezzo_acquisto' />
            </th>
            <th data-column='prezzo_vendita'>Prezzo vendita
                <br>
                <input type='text' data-column='prezzo_vendita' />
            </th>
            <th data-column='data'>Data
                <br>
                <input type='text' data-column='data' />
            </th>
            <th data-column='q'>Qta
                <br>
                <input type='text' data-column='q' />
            </th>
            <th data-column='qA'>QtaA
                <br>
                <input type='text' data-column='qA' />
            </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-column='id'>id</td>
            <td data-column='articolo'>articolo</td>
            <td data-column='fornitore'>fornitore</td>
            <td data-column='nome'>nome</td>
            <td data-column='taglia'>taglia</td>
            <td data-column='colore'>colore</td>
            <td data-column='prezzo_acquisto'>prezzo_acquisto</td>
            <td data-column='prezzo_vendita'>prezzo_vendita</td>
            <td data-column='data'>data</td>
            <td data-column='q'>q</td>
            <td data-column='qA'>qA</td>
        </tr>
        <tr>
            <td data-column='id'>idx</td>
            <td data-column='xarticolo'>articolo</td>
            <td data-column='fornitore'>fornitorex</td>
            <td data-column='nome'>nome</td>
            <td data-column='taglia'>taglia</td>
            <td data-column='colore'>colore</td>
            <td data-column='prezzo_acquisto'>prezzo_acquisto</td>
            <td data-column='prezzo_vendita'>prezzo_vendita</td>
            <td data-column='data'>data</td>
            <td data-column='q'>q</td>
            <td data-column='qA'>qA</td>
        </tr>
        <tr>
            <td data-column='id'>id</td>
            <td data-column='articolo'>articolox</td>
            <td data-column='fornitore'>fornitore</td>
            <td data-column='nome'>nome</td>
            <td data-column='taglia'>taglia</td>
            <td data-column='colore'>colore</td>
            <td data-column='prezzo_acquisto'>prezzo_acquisto</td>
            <td data-column='prezzo_vendita'>prezzo_vendita</td>
            <td data-column='data'>data</td>
            <td data-column='q'>q</td>
            <td data-column='qA'>qA</td>
        </tr>
        <tr>
            <td data-column='id'>id</td>
            <td data-column='articolo'>articolo</td>
            <td data-column='fornitore'>fornitorex</td>
            <td data-column='nome'>nome</td>
            <td data-column='taglia'>taglia</td>
            <td data-column='colore'>colore</td>
            <td data-column='prezzo_acquisto'>prezzo_acquisto</td>
            <td data-column='prezzo_vendita'>prezzo_vendita</td>
            <td data-column='data'>data</td>
            <td data-column='q'>q</td>
            <td data-column='qA'>qA</td>
        </tr>
    </tbody>

question, how can I filter by comma separated list: filter('td[data-column=id,articolo]')? is it possible?
yes, for more than one, with classes you can do that, passing a comma separated list, but it seems it is not possible with data atrributes

Collectives™ on Stack Overflow

jQuery - Filtering table using data attributes

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related