dataTable columnFilter выпадающие окна не отображаются

Question

У меня возникли проблемы с отображением полей данных 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> 
} 

Answer 1

Что мне не хватает? Ясно, что мой мозг - это то, чего не хватает. Должны иметь элементы нижнего колонтитула с соответствующими столбцами.

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

Answer 2

Исправьте вам нужно иметь <tfoot></tfoot> с соответствующими столбцами. Если у вас есть имена столбцов в <thead></thead>, может быть полезно иметь имена также в <tfoot></tfoot>.

И так как вы решили свою проблему, пожалуйста, отметьте свой ответ как правильный, чтобы каждый мог видеть, что на вопрос есть ответ.