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>中也可以使用这些名称。

既然你已经解决了问题，请将你的答案标记为正确，这样每个人都可以看到问题有答案。

dataTable columnFilter下拉框不会出现

2 个答案: