jQuery DataTables 多选列过滤器

本文介绍了jQuery DataTables 多选列过滤器的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我想得到的是针对单个 DataTables 列的类似 excel 的多条件过滤.我在这里遇到了一些与该主题相关的 stackoverflow 主题，但似乎没有一个主题能够实现我正在寻找的内容.

What I would like to get is excel-like multiple criteria filtering for individual DataTables columns. I have come across few topics here on stackoverflow related to the subject but none of those seem to implement what I'm looking for.

到目前为止，我只有样本表，如果您有任何(甚至是最高级别的)指导，我将不胜感激.

So far, I've got only sample table and I'd appreciate any (even most high-level) guidance as of where to move next.

	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>

推荐答案

您可能会发现以下 DataTables 插件.为了演示目的，我对您的示例进行了一些扩展(由于通过 jsdelivr 从 github 提供的非缩小文件，它的运行速度有些慢):

You may find of use following DataTables plug-in. I have somewhat extended your example for demonstration purposes (it works somewhat slow as non-minified files served from github through 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 多选列过滤器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！