时间戳

首页 > 解决方案 > DataTables：过滤自定义数据属性

jquery - DataTables：过滤自定义数据属性

问题描述

我想通过从选择输入中选择过滤器来过滤 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();
});

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

标签： jqueryhtmldatatables

解决方案

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

推荐阅读