DataTables Header displaying as a row? MVC Asp.net

Question

I'm following along with a udemy course, I'm at the stage where data tables is meant to render a table, but for some reason when it renders my table it pushes the TH into the table as a td?

Screenshot

<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>
}

I'm new to using both .net and datatables, can anyone spot why it would do this? It doesn't even align with the arrangement buttons.

Oh man, can't believe I missed that! Been awhile since I wrote tables by hand. If you leave it as an answer I can mark as completed. Cheers! — theHussle
– theHussle, Commented Nov 13, 2016 at 3:42

user3559349 · Accepted Answer · 2016-11-13 03:52:17Z

3

Wrap your 'headings' in a <thead> and the remaining rows in <tbody> element. The plugin is ordering all your rows by first column (defined by "order": [[1, "asc"]]) so that the result is Deforest-> firstname -> James

<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>

answered Nov 13, 2016 at 3:52

user3559349

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

DataTables Header displaying as a row? MVC Asp.net

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related