数据表单列过滤器

Question

我阅读了 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 ]
                }
            ]
    */
});

Answer 1

如果您使用的是 Datatables 版本 1.10 及更高版本，您希望使用 DOM 选项将 div 放置在 header 中您想要添加您的过滤器并向其中添加 select。

 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;
    });

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

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

查看此 JSFiddle 示例，了解或多或少应该满足您的要求。

Answer 2

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

数据表单列过滤器

Datatables Single Column Filter

datatables

jquery-datatables