DataTables標題顯示爲一行？ MVC Asp.net

我跟隨一個udemy課程，我在數據表的目的是呈現一個表的階段，但由於某種原因，當它呈現我的表時，它推動TH作爲一個表TD？DataTables標題顯示爲一行？ MVC Asp.net

截圖

<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和數據表，任何人都可以發現它爲什麼要這麼做？它甚至不與排列按鈕對齊。

來源

2016-11-13 theHussle

哦，不能相信我錯過了！一段時間以來，我手工編寫表格。如果你把它作爲答案，我可以標記爲已完成。乾杯! – theHussle

將「標題」包裝在<thead>中，其餘行包含在<tbody>元素中。該插件訂購所有你的第一列（由"order": [[1, "asc"]]定義）行，這樣的結果是d eforest->˚F irstname - >Ĵ埃姆斯

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

來源

2016-11-13 03:52:17

DataTables標題顯示爲一行？ MVC Asp.net

回答

相關問題