DataTables - 如何过滤多个列？答案

【问题标题】：DataTables - how to filter across multiple columns?DataTables - 如何过滤多个列？
【发布时间】：2018-01-12 15:26:37
【问题描述】：

我希望能够使用 DataTables 按多列进行过滤。现在我正在使用 fnFilter() 进行过滤，但它的列参数似乎只接受一个整数，而不是一个列数组。这是我目前所拥有的：https://jsfiddle.net/dmcgrew/x85o0mgL/2/

在“允许的波峰”列中，我有一个 data-search 属性，其中设置了 yescrest 或 nocrest。我也想使用“Crest”复选框来过滤。

如果我点击 Pristine 和 Crest 复选框，我应该会看到允许使用 Crest 的两个 Pristine 项目。

【问题讨论】：

寻求调试帮助的问题（“为什么这段代码不起作用？”）必须包括所需的行为、特定的问题或错误以及重现它所需的最短代码在问题本身。没有明确的问题陈述的问题对其他读者没有用处。请参阅：How to create a Minimal, Complete, and Verifiable example。换句话说，问题应该是自包含的，而不是像 jsFiddle 这样依赖外部资源。这让它在很长一段时间内都有用（虽然小提琴很好）
嗨达斯汀，你好吗？....也许这就是你想要的？ jsfiddle.net/x85o0mgL/3

标签： javascript jquery datatables

【解决方案1】：

您可以查看this DataTables 插件，它允许多列多条件过滤（包括联合选择）。

这是工作 DEMO：

$(document).ready(function () {
	//Source data definition	
	var tableData = [
    {item: 'banana', category: 'fruit', color: 'yellow'},
    {item: 'pear', category: 'fruit', color: 'green'},
    {item: 'cabbage', category: 'vegie', color: 'green'},
    {item: 'carrot', category: 'vegie', color: 'red'},
    {item: 'apple', category: 'fruit', color: 'red'},
    {item: 'kiwi', category: 'fruit', color: 'brown'}
	];
	//DataTable definition	
	window.dataTable = $('#mytable').DataTable({
			sDom: 'tF',
			data: tableData,
			columns: [{
					data: 'item',
					title: 'Item'
				}, {
					data: 'category',
					title: 'Category'
				}, {
					data: 'color',
					title: 'Color'
		
			}]
	});

});

<!doctype html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.mfilter.tk/js/mfilter.min.js"></script>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
  <link rel="stylesheet" type="text/css" href="https://cdn.mfilter.tk/css/mfilter.min.css">
</head>
<body>
  <table id="mytable"></table>
</body>
</html>

【讨论】：

感谢发布，但您的示例可能无法正常工作，没有列过滤元素。
点击过滤器图标
没有过滤器图标，见this screenshot。
+1 为答案。是否有可能只获得过滤器选项？我不想强迫用户点击过滤器、取消等
我如何概括它？它绑定到这些标头，并且在动态呈现数据时会起作用。我有 100 个不同列的表。我认为为每个表编写 JS 函数并不是一个好主意