数据表单柱筛选

Question

我读API文档，发现个别列搜索柱一行过滤数据，伟大的，但我只需要通过名称在上面添加一个下拉列表过滤器（数字过滤器旁边）

当前设置（使用tabletool和自举）

$('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

如果您使用的数据表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了解什么或多或少应符合您的要求。