dataTable columnFilter dropdown boxes won't appear - datatables-1.10

Question

I'm having problems getting my dataTable columnFilter select boxes to appear.
I have similar code blocks working on several other pages within the application, but for some reason, the <select> dropdown boxes won't appear. I have validated that the list of values (statusValues and seasonValues) have the correct values in the array and there are no errors in the console.
The column count is correct (I had that problem before). I'm using dataTables 1.10.9.
What am I missing?
Here's my code:
#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>#tourn.Name</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

What am I missing? Clearly, my brain is what's missing. Gotta have the footer elements with matching columns.
<tfoot>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</tfoot>

Answer 2

Correct you need to have the <tfoot></tfoot> with matching columns. If you have the names of the columns in the <thead></thead> it might be helpful to have the names also in the <tfoot></tfoot>.
And since you have solved your problem please mark your answer as correct so that everyone can see that the question has an answer.