Jquery數據表：篩選器/搜索基於表外的選擇框

Question

我在表上使用dataTables jQuery插件，但我想在搜索框前添加一個Filter Column下拉框。我看到了將下拉框添加到單個列的文檔，但我只想添加一個包含所有列名稱的下拉框。我對此很陌生，非常感謝任何幫助。我在下面添加了我的代碼。

HTML：

<select id='mySelector'> 
    <option value="">Please Select</option> 
    <option value='Name'>Name</option> 
    <option value='Highlights'>Highlights</option> 
    <option value='Area'>Area</option> 
</select> 
<table class="table table-striped" id="myTable" cellspacing="0"> 
    @{int rowNo = 0;} 
    <thead> 
     <tr> 
      <th> 
       Item 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.Name) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.Highlights) 
      </th> 
      <th> 
       @Html.DisplayNameFor(model => model.Area) 
      </th> 
      <th></th> 
     </tr> 
    </thead> 
    <tbody> 

     @foreach (var item in Model.Select((x, i) => new { Data = x, Index = i + 1 })) 
     { 
      rowNo++; 
      <tr> 
       <td> 
        @rowNo.ToString("000") 
       </td> 
       <td> 
        @Html.DisplayFor(modelItem => item.Data.Name) 
       </td> 
       <td> 
        @Html.DisplayFor(modelItem => item.Data.Highlights) 
       </td> 
       <td> 
        @Html.DisplayFor(modelItem => item.Data.Area) 
       </td> 
       <td> 
        @Html.ActionLink("Edit", "Edit", new { id = item.Data.id}) | 
        @Html.ActionLink("Details", "Details", new { id = item.Data.id}) | 
        @Html.ActionLink("Delete", "Delete", new { id = item.Data.id}) 
       </td> 
      </tr> 

     } 
    </tbody> 
</table> 

JS：

$('#myTable').DataTable(); 

Answer 1

試試這個，我想補充的下拉選項來選擇要搜索的列。

var table = $('#example').DataTable({ 
    dom : 'l<"#add">frtip' 
}) 

$('<label/>').text('Search Column:').appendTo('#add') 
$select = $('<select/>').appendTo('#add') 

$('<option/>').val('All').text('All').appendTo($select); 
$('<option/>').val('0').text('Seq').appendTo($select); 
$('<option/>').val('1').text('Name').appendTo($select); 
$('<option/>').val('2').text('Position').appendTo($select); 
$('<option/>').val('3').text('Office').appendTo($select); 
$('<option/>').val('4').text('Start Date').appendTo($select); 
$('<option/>').val('5').text('Salary').appendTo($select); 

$('input[type="search"]').on('keyup change', function() { 
    var searchValue = $(this).val(); 
    var columnSearch = $select.val(); 

    if(columnSearch == 'All'){ 
     table.search(searchValue).draw(); 
    } else { 
     table.columns(columnSearch).search(searchValue).draw(); 
    } 
}); 

這裏是demo.上面的代碼。