Question

我想得到的是针对单个DataTables列的类似于excel的多条件过滤。我在这里遇到了一些与该主题相关的关于stackoverflow的主题，但是这些主题似乎都没有实现我想要的。

到目前为止，我只有样本表，对于任何下一步的操作，我都表示感谢（甚至是最高级的指导）。

	var tableData = [
		{name: 'Clark Kent', city: 'Metropolis'},
	  {name: 'Bruce Wayne', city: 'Gotham'},
	  {name: 'Steve Rogers', city: 'New York'},
	  {name: 'Peter Parker', city: 'New York'},
	  {name: 'Thor Odinson', city: 'Asgard'}
	];

	var dataTable = $('#mytable').DataTable({
		sDom: 't',
	  data: tableData,
	  columns: [
		{data: 'name', title: 'Name'},
		{data: 'city', title: 'City'}
	  ]
	});

<!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>
  <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
</head>
<body>
  <table id="mytable"></table>
</body>
</html>

Answer 1

您可能会在DataTables plug-in之后找到使用方法。我已经出于示例目的扩展了您的示例（由于从github通过jsdelivr提供的非最小化文件，它的工作速度有些慢）：

$(document).ready(function () {
	//Source data definition	
	var tableData = [{
			name: 'Clark Kent',
			city: 'Metropolis',
			race: 'cryptonian'
		}, {
			name: 'Bruce Wayne',
			city: 'Gotham',
			race: 'human'
		}, {
			name: 'Steve Rogers',
			city: 'New York',
			race: 'superhuman'
		}, {
			name: 'Peter Parker',
			city: 'New York',
			race: 'superhuman'
		}, {
			name: 'Thor Odinson',
			city: 'Asgard',
			race: 'god'
		}, {
			name: 'Jonathan Osterman',
			city: 'New York',
			race: 'superhuman'
		}, {
			name: 'Walter Kovacs',
			city: 'New Jersey',
			race: 'human'
		}, {
			name: 'Arthur Curry',
			city: 'Atlantis',
			race: 'superhuman'
		}, {
			name: 'Tony Stark',
			city: 'New York',
			race: 'human'
		}, {
			name: 'Scott Lang',
			city: 'Coral Gables',
			race: 'human'
		}, {
			name: 'Bruce Banner',
			city: 'New York',
			race: 'superhuman'
		}
	];
	//DataTable definition	
	window.dataTable = $('#mytable').DataTable({
			sDom: 'tF',
			data: tableData,
			columns: [{
					data: 'name',
					title: 'Name'
				}, {
					data: 'city',
					title: 'City'
				}, {
					data: 'race',
					title: 'Race'
		
			}]
	});
});

<!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 type="application/javascript" 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>

jQuery DataTables多个选择列过滤器

1 个答案: