Question

我希望能够使用DataTables过滤多个列。现在我正在使用fnFilter（）来过滤，但它的列参数似乎只接受一个整数，而不是一个列数组。这是我到目前为止：https://jsfiddle.net/dmcgrew/x85o0mgL/2/

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

如果我点击Pristine and Crest复选框，我会看到两个允许波峰的原始物品。

Answer 1

您可以检出this DataTables插件，该插件允许进行多列多标准过滤（包括联合选择）。

以下是有效的演示：

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

DataTables - 如何跨多个列过滤？

1 个答案: