DataTables，过滤具有多个值的多个列答案

【问题标题】：DataTables, filter multiple columns with multiple valuesDataTables，过滤具有多个值的多个列
【发布时间】：2018-03-08 22:27:27
【问题描述】：

following page 提供了一个示例，说明如何按列上的值实现过滤器。

我想用multiple select 替换select，这样用户就可以过滤掉特定列的多个值，但是，我不确定如何处理multiple select 接收到的多个值。

    $(document).ready(function() {
        $('#example').DataTable( {
            initComplete: function () {
                this.api().columns().every( function () {
                    var column = this;
                    var select = $('<select multiple><option value=""></option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

                            column
                                .search( val ? '^'+val+'$' : '', true, false )
                                .draw();
                        } );

                    column.data().unique().sort().each( function ( d, j ) {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    } );
                } );
            }
        } );
    } );

具体来说，当this 是多选时，我需要知道在这里做什么。

var val = $.fn.dataTable.util.escapeRegex(
    $(this).val()
);

column
    .search( val ? '^'+val+'$' : '', true, false )
    .draw();

【问题讨论】：

标签： jquery datatables

【解决方案1】：

来自网站：

无序匹配单词。例如，如果您搜索 Allan Fife，它会匹配包含单词 Allan 和 Fife 的行，无论顺序如何或它们出现在表格中的位置。

根据你想做什么，使用 filter() 而不是 search() 可能会更好。

在你的 $(this).val() 这些值应该以某种类型的数组或列表返回。检查数据，看看它的样子，并进行相应的处理。

【讨论】：

【解决方案2】：

您可能想查看this DataTables 插件，它提供“多列多条件”过滤（包括跨多列的联合选择）。

这里是简短的工作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>

【讨论】：

感谢发布，但您的示例可能无法正常工作，没有列过滤元素。
带有过滤器图标的按钮是过滤器元素，你点击它们，你会得到具有必要功能的下拉菜单。