DataTables：过滤自定义数据属性答案

【问题标题】：DataTables: Filter on custom data attributeDataTables：过滤自定义数据属性
【发布时间】：2019-02-25 13:14:50
【问题描述】：

我想通过从选择输入中选择过滤器来过滤 DataTable。

<select class="form-control filter-table" data-column="language">
  <option selected>Alle Sprachen</option>
  <option value="GER">Deutsch</option>
  <option value="ENG">Englisch</option>
</select>

我的桌子就是这样设计的：

<tr>
  <td>Hello</td>  <td data-language="ENG">Englisch</td>
</tr>
<tr>
  <td>Hello</td>  <td data-language="GER">German</td>
</tr>

这是我的事件处理程序：

$('.filter-table').change(function (e) {
    var column = $(this).data('column');
    var filter = $(this).val();
});

我已经搜索了很长时间，但没有找到答案

【问题讨论】：

只是好奇，您是在寻找与 jQuery 插件 DataTables 完全相关的答案，还是在寻找针对任意表的通用 jQuery 解决方案？如果是前者，那么“过滤自定义数据属性”到底是什么意思，匹配行是否应该与所选选项具有相同的文本或相同的（任意）属性值？

标签： jquery html datatables

【解决方案1】：

我假设您正在使用 DataTables Jquery 插件。

<select id="dropdown1" class="form-control filter-table" data-column="language">
<option selected>Alle Sprachen</option>
<option value="GER">Deutsch</option>
<option value="ENG">Englisch</option>
</select>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
        <tr>
            <th>Greeting</th>
            <th>Language</th>
        </tr>
    </thead>
<tr>
<td>Hello</td>  <td data-language="ENG">Englisch</td>
</tr>
<tr>
<td>Hello</td>  <td data-language="GER">German</td>
</tr>
</table>

Javascript：

$(document).ready(function() {
   var table =  $('#example').DataTable();

 $('#dropdown1').on('change', function () {
     if(this.value=="Alle Sprachen")
      {
      table.columns(1).search('').draw();
      }
      else
      {
      table.columns(1).search( this.value ).draw();
      }                   
   } );

});

工作小提琴：https://jsfiddle.net/an5kbx0z/

【讨论】：

更新了 fiddle，实现了数据表的“全选”功能。

【解决方案2】：

如果你碰巧在寻找通用的 jQuery 解决方案，你可以看看这个：

	//populate options
	$('#lang').append([...$('#mytable tr td:nth-of-type(2)')].sort().reduce((options, option) => options+=`<option value="${$(option).text()}">${$(option).text()}</option>`,'<option value="All" selected>All</option>'));
	
  //grab table data
	const tableDataObj = {};
	tableDataObj.data = [...$('#mytable tbody tr')].map(row => {
		const rowObj = {};
		[...$(row).children('td')].forEach((cell, index) => rowObj[$(`#mytable thead th:eq(${index})`).text()] = $(cell).text());
		return rowObj;
	});
	tableDataObj.header = [];
	tableDataObj.data.map(row => Object.keys(row)).flat().forEach(entry => {
		if(tableDataObj.header.indexOf(entry) == -1) tableDataObj.header.push(entry);
	});
	
  //draw table upon selection
	$('#lang').on('change', function() {
		const filteredData = JSON.parse(JSON.stringify(tableDataObj));
		filteredData.data = filteredData.data.filter(entry => entry.Language == $(this).val() || $(this).val() == 'All');
		$('#mytable').html('<table></table>');
		$('#mytable').append('<thead><tr>'+filteredData.header.reduce((thead, th) => thead+=`<th>${th}</th>`,''));
		$('#mytable').append(`<tbody>${Object.values(filteredData.data).reduce((rows, row) => rows+='<tr>'+Object.values(row).reduce((tds, td) => tds += '<td>'+td+'</td>','')+'</tr>','')}</tbody>`);
	});

<!doctype html>
<html>
	<head>
		<script type="application/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
		<script type="application/javascript" src="test.js"></script>
		<link rel="stylesheet" type="text/css" href="test.css">
		</head>
		<body>
			<select id="lang"></select>
			<table id="mytable">
				<thead>
					<tr>
						<th>Greeting</th><th>Language</th>
					</tr>
				</thead>
				<tbody>
					<tr>
						<td>Hello</td><td>English</td>
					</tr>
					<tr>
						<td>Hallo</td><td>Deutsch</td>
					</tr>
					<tr>
						<td>Selam</td><td>Turkce</td>
					</tr>
					<tr>
						<td>Salut</td><td>Francais</td>
					</tr>
					<tr>
						<td>Ciao</td><td>Italiano</td>
					</tr>
				</tbody>
			</table>
		</body>
	</html>

它不是那么优雅和可扩展，但提供了一般的想法。

如果您需要 DataTables 解决方案，我可能会推荐 this 插件。有了它，您无需使用额外的下拉菜单 - 它简洁明了，即使在其早期版本中，也可以完美满足您的要求。使用这种方法，除了基本的 DataTables 排序、分页/滚动之外，您还可以获得多个选择过滤器。这是DEMO。

【讨论】：