Question

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

enter image description here

当前设置（使用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 ]
                }
            ]
    */
});

Answer 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，了解更多或更少符合您要求的示例。

Answer 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>

数据表单列过滤器

2 个答案: