数据表单列过滤器答案

【问题标题】：Datatables Single Column Filter数据表单列过滤器
【发布时间】：2015-03-03 12:24:10
【问题描述】：

我阅读了 api 文档并找到单独的列搜索以按列行过滤数据，很好，但我只需要在顶部按名称添加一个下拉过滤器（在数字过滤器旁边）

当前设置（使用 tabletool 和 bootstrap）

$('table').DataTable({
    'aLengthMenu': [[25, 50, 75, -1], [25, 50, 75, 'All']],
    'iDisplayLength': 25,
    'stateSave': true,
    'oLanguage': {
        'sLengthMenu': 'Show : _MENU_',
        'sSearch': 'Search : _INPUT_',
    },
    'oTableTools': {
        'sSwfPath': 'media/swf/copy_csv_xls_pdf.swf'
    },
    /*
    'order': [[ 1, 'asc' ]],
    'aoColumnDefs': [
                {
                    'bSortable': false,
                    'aTargets': [ -1, 0 ]
                }
            ]
    */
});

【问题讨论】：

标签： datatables jquery-datatables

【解决方案1】：

如果您使用的是 Datatables 版本 1.10 及更高版本，您希望使用 DOM 选项在要添加过滤器的标题中放置一个 div 并将您的选择添加到其中。

 var table;
    $(document).ready(function () {
        table = $('#example').dataTable({
            "dom": "l<'#myFilter'>frtip"
        });
        var myFilter = '<select id="mySelect">'
          + '<option value="1">Searchval 1</option>'  
          + '<option value="2">Searchval 2</option>'
          + '<option value="3">Searchval 3</option>'
          + '</select>';
        $("#myFilter").html(myFilter);
        table.fnDraw();        
    });

然后添加custom filter function。

   $.fn.dataTable.ext.search.push(
    function (settings, data) { 
        //your filter stuff belongs here
        return true;
    });

并在每次更改过滤器时重新绘制表格。

    $("body").on("change", "#mySelect", function () {
        table.fnDraw();
    });

请参阅此JSFiddle，了解或多或少符合您要求的示例。

【讨论】：

这很好用。但不知何故，在我的页面中，mySelect 下拉列表出现在 Show [x] entries 行下方的新行中。有谁知道如何解决这个问题？

【解决方案2】：

这个想法是在thisDataTables 插件中实现的，你可以查看工作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>

【讨论】：

感谢您的发布，但您的示例可能无法正常工作，没有列过滤元素。
点击过滤器图标
没有过滤器图标，见this screenshot。
您使用的是哪个平台/操作系统/浏览器？
cdn.mfilter.cf 的 SSL 证书存在问题，这就是脚本加载失败的原因。如果我在本地测试你的脚本，它就可以工作。