單個列在特定列上搜索，DataTable

Question

我見過如何使用文本框或包含每列返回值的下拉菜單爲DataTable的每列應用單個列搜索的示例。但是，我還沒有遇到任何機制只將它們應用於特定的列。例如，使用下面將適用搜索文本框以外的所有coloumn零：

$('#DataTable tfoot th:gt(0)').each(function() { 
    var title = $(this).text(); 
    $(this).html('<input type="text" 
    style="width:120px;" placeholder="search ' + title + '" />'); 
}); 

但是，如何將我然後也列6 & 7中刪除它，例如？

*更新*此問題僅與服務器端處理有關。應該早些說明。

Answer 1

我personnaly使用列定義結合iniComplete回調。 在這個例子中兩種類型的搜索，你可以添加許多不同的檢索（甚至沒有搜索）

$('#table').DataTable({ 
      "ajax": { 
       "url": "/flux/ajax", 
       "dataSrc": "data", 
       "scrollX": true 
      }, 
      "columns": [      
       {className: "select", "title": "Status", "data": "stat"} 
       {className: "text", "title": "Libellé", "data": "Lib"}} 
      ], 
      initComplete: function() { 

       this.api().columns().every(function() { 
        var column = this; 
        if ($(column.header()).hasClass('select')) { 
         console.log(column); 
         var select = $('<select><option value="">' + $(column.header()).html() + '</option></select>') 
           .appendTo($(column.header()).empty()) 
           .on('change', function (e) { 
            e.stopImmediatePropagation(); 
            var val = $.fn.dataTable.util.escapeRegex(
              $(this).val() 
              ); 
            column 
              .search(val ? '^' + val + '$' : '', true, false) 
              .draw(); 
            return false; 
           }); 
         column.data().unique().sort().each(function (d, j) { 
          select.append('<option value="' + d + '">' + d + '</option>'); 
         }); 
        } else if ($(column.header()).hasClass('text')) { 
         var text = $('<input type="text" placeholder="' + $(column.header()).html() + '" />') 
           .appendTo($(column.header()).empty()) 
           .on('keyup change', function() { 
            var val = $.fn.dataTable.util.escapeRegex(
             $(this).val() 
             ); 
            if (column.search() !== this.value) { 
             column 
               .search(val) 
               .draw(); 
            } 
            return false; 
           }); 

        } 

       }); 
      } 
     });