Jqueryデータテーブル：テーブル外の選択ボックスに基づくフィルタ/検索

Question

テーブルでdataTables jQueryプラグインを使用していますが、検索ボックスの前にフィルタ列ドロップダウンボックスを追加します。個々の列にドロップダウンボックスを追加するためのドキュメントがありますが、すべての列名を持つドロップダウンボックスを1つ追加するだけです。私はこれに新しいです、そして、どんな助けにも大いに感謝します。私は以下のコードを追加しました。

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.あります。