數據表單柱篩選

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瞭解什麼或多或少應符合您的要求。