DataTablesヘッダーが行として表示されますか？ MVC Asp.net

Question

私はudemyコースに沿っていますが、私はデータテーブルがテーブルをレンダリングする段階ですが、何らかの理由でテーブルをレンダリングするとTHがテーブルにtd？それがこれを行うなぜ

スクリーンショット

<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とDataTableの両方を使用する新たなんだ、誰でも見つけることができますか？配置ボタンとは一線を画していません。

Answer 1

<thead>に「見出し」を、残りの行に<tbody>という要素を入れてください。 >Jエイムズ

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