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.

回答1:

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>

来源：https://stackoverflow.com/questions/48229250/datatables-how-to-filter-across-multiple-columns

标签

javascript

jquery

datatables