dataTable columnFilter下拉框不會出現

我有問題讓我的dataTable columnFilter選擇框出現。dataTable columnFilter下拉框不會出現

我有類似的代碼塊在應用程序的其他幾個頁面上工作，但由於某種原因，<select>下拉框不會出現。我已經驗證了值列表（statusValues和seasonValues）在數組中具有正確的值，並且控制檯中沒有錯誤。

列數是正確的（我之前有過這個問題）。我正在使用dataTables 1.10.9。

我錯過了什麼？

這裏是我的代碼：

@using ApolloAMS.Business.Models; 

@model List<Tournament> 

@{ 
    ViewBag.Title = "Manage Tournaments"; 
    ViewBag.TournamentName = ""; 
    List<Season> seasons = ViewBag.Seasons; 

} 

<div class="row" style="margin-bottom: 20px;"> 
    <div class="col-md-2"> 
     <span style="float: left; font-weight: bold;">Tournament Status:</span> 
     <span style="float: left; width: 100%;" id="statusFilter" class="filter"></span> 
    </div> 
    <div class="col-md-2"> 
     <span style="float: left; font-weight: bold;">Season:</span> 
     <span style="float: left; width: 100%;" id="seasonFilter" class="filter"></span> 
    </div> 
</div> 
<table id="tblData" class="table table-bordered table-hover dataTable"> 
    <thead> 
     <tr> 
      <th>Action</th> 
      <th>Name</th> 
      <th>Status</th> 
      <th>Season</th> 
      <th>Dates</th> 
      <th># Flights /# Lanes/Max Shooters</th> 
     </tr> 
    </thead> 
    <tbody> 
    @foreach (Tournament tourn in Model) 
    { 
     Season season = seasons.Where(s => s.ID.Equals(tourn.SeasonID)).FirstOrDefault(); 
     <tr> 
      <td> 
       @{Html.RenderPartial("TournamentActions", tourn.ID);} 
      </td> 
      <td><a href="@Url.Action("Dashboard", "Tournaments", new { id = tourn.ID })">@tourn.Name</a></td> 
      <td><span class="statusCell">@tourn.TournStatusName</span></td> 
      <td><span class="seasonCell">@season.Name</span></td> 
      <td>@tourn.DateStart.ToShortDateString() - @tourn.DateEnd.ToShortDateString()</td> 
      <td>@tourn.NumberOfFlights/@tourn.NumberOfLanes/@tourn.MaxShooters</td> 
     </tr> 
    } 
    </tbody> 
</table> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 

@section Scripts 
{ 
    <script type="text/javascript"> 
     var statusValues = []; 
     var seasonValues = []; 

     $('.statusCell').each(function() { 
      var found = false; 
      var text = $(this).text(); 

      for (i = 0; i < statusValues.length; i++) { 
       if (statusValues[i] == text) { 
        found = true; 
        break; 
       } 
      } 

      if (!found) { 
       statusValues.push(text); 
      } 
     }); 

     $('.seasonCell').each(function() { 
      var found = false; 
      var text = $(this).text(); 

      for (i = 0; i < seasonValues.length; i++) { 
       if (seasonValues[i] == text) { 
        found = true; 
        break; 
       } 
      } 

      if (!found) { 
       seasonValues.push(text); 
      } 
     }); 

     statusValues.sort(); 
     seasonValues.sort(); 

     $("#tblData").dataTable(
    { 
     "aLengthMenu": [[10, 25, -1], [10, 25, "All"]] 
     , "iDisplayLength": -1 
     , "scrollX": true 
     , "stateSave": true 
     , "oLanguage": {"sSearch": "Search: "} 
     , "order": [[4, "desc"]] 
    }).columnFilter({ 
     aoColumns: [ 
       null, 
       null, 
       { type: "select", values: statusValues, sSelector: "#statusFilter" }, 
       { type: "select", values: seasonValues, sSelector: "#seasonFilter" }, 
       null, 
       null, 
     ] 
    }); 
     //addl layout/config for datatable 
     $('input[type=search]').css("background-color", "yellow"); 
     $('input[type=search]').css("font-weight", "bold"); 
     $('input[type=search]').css("font-size", "large"); 

     $('#tblData_filter label').css("font-size", "large"); 
     $('#tblData_filter label').css("font-weight", "bold"); 
    </script> 
}

來源

2016-09-18 M Brian Dunson

我缺少什麼？顯然，我的大腦缺少了什麼。得到具有匹配列的頁腳元素。

<tfoot> 
    <tr> 
     <th></th> 
     <th></th> 
     <th></th> 
     <th></th> 
     <th></th> 
     <th></th> 
    </tr> 
</tfoot>

來源

2016-09-18 17:09:43

正確您需要具有匹配列的<tfoot></tfoot>。如果您有<thead></thead>中的列名稱，則在<tfoot></tfoot>中也可能有幫助。

既然您已經解決了您的問題，請將您的答案標記爲正確，以便每個人都可以看到問題有答案。

來源

2016-11-28 18:32:57 Mike

dataTable columnFilter下拉框不會出現

回答

相關問題