Question

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

<div class="floating_text <?php echo ($this->position == 'left') ? 'left' : '' ?>">
        <?= $this->text ?>
</div>

这就是我的桌子的设计方式：

<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>

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

Answer 1

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

.scss

Javascript：

<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>

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

Answer 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。

DataTables：过滤自定义数据属性

2 个答案: