数据表通过下拉菜单选择项过滤

Question

我在一个网站（asp.net）工作，我使用包含数据表模板和初始化的这个表此代码：

if ($('body').data('page') == 'products') { 


    var opt = {}; 

    // Tools: export to Excel, CSV, PDF & Print 
    opt.sDom = "<'row m-t-10'<'col-md-6'f><'col-md-6'T>r>t<'row'<'col-md-6'><'col-md-6 align-right'p>>", 
    opt.oLanguage = { "sSearch": "" } , 
    opt.iDisplayLength = 15, 

    opt.oTableTools = { 
     "sSwfPath": "assets/plugins/datatables/swf/copy_csv_xls_pdf.swf", 
     "aButtons": ["csv", "xls", "pdf", "print"] 
    }; 
    opt.aoColumnDefs = [ 
      { 'bSortable': false, 'aTargets': [6, 7, 8, 9] } 

     ]; 



    var oTable = $('#products-table').dataTable(opt); 

    oTable.fnDraw(); 



    /* Add a placeholder to searh input */ 
    $('.dataTables_filter input').attr("placeholder", "Search a product..."); 

    /* Delete a product */ 
    $('#products-table a.delete').on('click', function (e) { 
     e.preventDefault(); 
     if (confirm("Are you sure to delete this product ?") == false) { 
      return; 
     } 
     var nRow = $(this).parents('tr')[0]; 
     oTable.fnDeleteRow(nRow); 
     // alert("Deleted! Do not forget to do some ajax to sync with backend :)"); 
    }); 

} 

我想补充一个特定列的过滤器类型选择（下拉框）。 有帮助吗？

Answer 1

有不同的推荐方法，具体取决于您使用哪个版本的dataTables。比方说你有一个<select>这样的：

<select id="filter"> 
    <option value="firefox">firefox</option> 
    <option value="mozilla">mozilla</option> 
</select> 

数据表1.10.x（使用DataTable()构造函数）：

$("#filter").on('change', function() { 
    //filter by selected value on second column 
    table.column(1).search($(this).val()).draw(); 
}); 

看到演示 - >http://jsfiddle.net/qxc26rmd/

数据表1.9。 x（使用dataTable()构造函数）：

$("#filter").on('change', function() { 
    //filter by selected value on second column 
    table.fnFilter($(this).val(), 1); 
}); 

观看演示 ​​- >http://jsfiddle.net/92ttv3o4/