jQuery DataTables multiple select column filters

Question

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>

You should define "excel-like multiple criteria filtering for individual DataTables columns" as it applies to your dataset (by itself, it is sounds like a pretty massive step from "I've got only sample table".......) I believe I have an idea of what you are trying to go for, but to write all the code for you - ain't gonna happen.... - you are just too far off. Show what you have tried, details of where you want to go, etc. and you can get help. Posting 'sample data' and asking for the 'world' won't get very far. — Apps-n-Add-Ons
– Apps-n-Add-Ons, Commented Jan 15, 2019 at 12:12

score 0 · Accepted Answer · 2019-03-12 08:38:36Z

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>

Collectives™ on Stack Overflow

jQuery DataTables multiple select column filters

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related