數據表通過下拉菜單選擇項過濾

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/