jQuery DataTables multiple select column filters

前端未结

关注

 1  2016

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

相关标签:

1条回答

眼角桃花

2021-01-28 06:53

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>

0 讨论(0)