CODEWITHSUNDEEP
javascriptjquerydatatables
Dustin
Dustin

Reputation: 4459

DataTables - how to filter across multiple columns?

I'd like to be able to filter by multiple columns using DataTables. Right now I'm using fnFilter() to filter, but its column parameter seems to only accept a single integer, not an array of columns. This is what I have so far: https://jsfiddle.net/dmcgrew/x85o0mgL/2/

In the "crest allowed" column I have a data-search attribute with either yescrest or nocrest set. I'd like to use the "Crest" checkbox to be able to filter by that as well.

If I click the Pristine and Crest checkboxes I should see the two pristine items that allow crests.

Upvotes: 1

Views: 1272

Answers (1)

user3307073
user3307073

Reputation:

You may check out this DataTables plug-in, which allows multiple-column-multiple-criteria filtering (including union selection).

Here is the working DEMO:

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

Upvotes: 1

Related Questions