DataTables标题显示为一行？ MVC Asp.net

Question

我正在跟随一个udemy课程，我正处于数据表用于呈现表的阶段，但出于某种原因，当它呈现我的表时，它将TH作为td推送到表中？ / p>

截图

<table id="your_contacts" class="table">
    <tr>
        <th>@Html.DisplayNameFor(model => model.firstName)</th>
        <th>@Html.DisplayNameFor(model => model.lastName)</th>
        <th>@Html.DisplayNameFor(model => model.email)</th>
        <th>@Html.DisplayNameFor(model => model.phonePrimary)</th>
        <th>@Html.DisplayNameFor(model => model.phoneSecondary)</th>
        <th>@Html.DisplayNameFor(model => model.birthday)</th>
        <th>@Html.DisplayNameFor(model => model.address1)</th>
        <th>@Html.DisplayNameFor(model => model.address2)</th>
        <th>@Html.DisplayNameFor(model => model.city)</th>
        <th>@Html.DisplayNameFor(model => model.postcode)</th>
        <th>Details</th>
        <th></th>
    </tr>

@foreach (var item in Model) {
    <tr>
        <td>@Html.DisplayFor(modelItem => item.firstName)</td>
        <td>@Html.DisplayFor(modelItem => item.lastName)</td>
        <td>@Html.DisplayFor(modelItem => item.email)</td>
        <td>@Html.DisplayFor(modelItem => item.phonePrimary)</td>
        <td>@Html.DisplayFor(modelItem => item.phoneSecondary)</td>
        <td>@Html.DisplayFor(modelItem => item.birthday)</td>
        <td>@Html.DisplayFor(modelItem => item.address1)</td>
        <td>@Html.DisplayFor(modelItem => item.address2)</td>
        <td>@Html.DisplayFor(modelItem => item.city)</td>
        <td>@Html.DisplayFor(modelItem => item.postcode)</td>
        <td>@Html.ActionLink("Edit", "Edit", new { id=item.Id }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id })
        </td>
        <td>@Html.HiddenFor(modelItem => item.UserId)</td>
    </tr>
}
</table>

<!-- Used to call scripts after the Jquery/JS has loaded.-->
@section Scripts
{
    <script type="text/javascript">
        $(function () {
            $("#your_contacts").dataTable({
                "pagingType": "full_numbers"
                        , "scrollY": "600px"
                        , "columnDefs": [
                            { "width": "40px", "targets": 0 }
                            , { "width": "40px", "targets": 1 }
                            , { "width": "40px", "targets": 2 }
                            , { "width": "45px", "targets": 3 }
                            , { "width": "45px", "targets": 4 }
                            , { "width": "45px", "targets": 5 }
                            , { "width": "45px", "targets": 6 }
                            , { "width": "45px", "targets": 7 }
                            , { "width": "45px", "targets": 8 }
                            , { "width": "45px", "targets": 9 }
                            , { "width": "45px", "targets": 10 }
                            , { "width": "45px", "targets": 11 }
                        ]
                        , "order": [[1, "asc"]]
                        , "dom": 'Rlfrtip'
                        , "stateSave": "true"
                        , "lengthMenu": [[-1, 10, 20, 50, 100], ["All", 10, 20, 50, 100]]
            });
        });
    </script>
}

我是新手同时使用.net和数据表，有人能说出为什么会这样做吗？它甚至不与排列按钮对齐。

Answer 1

将{标题'包含在<thead>和<tbody>元素中的剩余行中。该插件按第一列（由"order": [[1, "asc"]]定义）排序全部您的行，以便结果为 D eforest-＆gt; f irstname - ＆gt;的Ĵ埃姆斯

<table id="your_contacts" class="table">
    <thead>
        <tr>
            <th>@Html.DisplayNameFor(model => model.firstName)</th>
            ....
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model) {
            ....
        }
    </tbody>
</table>