Раскрывающиеся поля 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>
}
Источник

2 ответа

Решение

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

<tfoot>
    <tr>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
        <th></th>
    </tr>
</tfoot>
Источник

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

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

Источник
Другие вопросы по тегам