jQuery - 使用数据属性过滤表

Posted 2023-02-26

【中文标题】jQuery - 使用数据属性过滤表

【英文标题】：jQuery - Filtering table using data attributes

【发布时间】：2018-02-01 18:11:13

【问题描述】：

我正在尝试按数据属性过滤此表，您可以在这里找到它：

http://jsfiddle.net/3nm5mz28/

我设法使用文本获取输入的值

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

还能够获取这些输入的数据属性：

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

这个想法是隐藏与输入的所有条件不匹配的行，按数据属性过滤。

现在我被困在这部分：

$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();

更新 我已经设法解决了大多数问题，除了按许多数据属性进行过滤：

http://jsfiddle.net/vdbo47xv/

如何按逗号分隔列表进行过滤：filter('td[data-column=id,articolo]')？有可能吗？

【问题讨论】：

那么，问题是什么？

@Stormcloak 我已经添加了我卡住的代码部分，你能帮忙吗？

【参考方案1】：

您应该更改代码中的这些部分。

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

到

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

和

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

到

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

完整的代码如下；

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>

【讨论】：

问题，如何按逗号分隔列表过滤：filter('td[data-column=id,articolo]')？有可能吗？

用逗号分割 inputVal 并逐一应用搜索。

我如何动态地做到这一点？

我无法理解。您要搜索“id,idx”等吗？

是的，不止一个，你可以通过类来做到这一点，传递一个逗号分隔的列表，但数据属性似乎不可能