移动设备的响应式数据表中未显示的列

Question

我为移动设备实现了一个响应式数据表 (iPhone)，它显示了除最后一列之外的所有列以及 CRUD 操作链接，例如编辑、详细信息和删除。

Mobile View

Desktop View

dataTable 也没有显示用于展开和关闭某些列的加号图标。我在创建数据表时遗漏了什么？

<div class="table-responsive">
    <table id="dataTable" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" style="width: 100%;">
        <thead>
            <tr>
                <th>
                    @Html.ActionLink("Last Name", "Index", new { sortOrder = ViewBag.NameSortParm, currentFilter = ViewBag.CurrentFilter })
                </th>
                <th>
                    First Name
                </th>
                <th>
                    @Html.ActionLink("Enrollment Date", "Index", new { sortOrder = ViewBag.DateSortParm, currentFilter = ViewBag.CurrentFilter })
                </th>
                <th></th>
            </tr>
        </thead>
        <tbody>
            @foreach (var item in Model)
            {
                <tr>
                    <td>
                        @Html.DisplayFor(modelItem => item.LastName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.FirstMidName)
                    </td>
                    <td>
                        @Html.DisplayFor(modelItem => item.EnrollmentDate)
                    </td>                    
                    <td>
                        @Html.ActionLink("Details", "Details", new { id = item.ID })
                        @if (User.IsInRole("Admin"))
                        {
                            @:|
                            @Html.ActionLink("Edit", "Edit", new { id = item.ID })@: |

                            @Html.ActionLink("Delete", "Delete", new { id = item.ID })
                        }
                        else
                        {
                        }
                    </td>
                </tr>
            }
        </tbody>
    </table>
</div>

Answer 1

我缺少用于响应式数据表的 JavaScript 标记，并且我的 <tr> 元素的子元素数量与 <th> 元素的子元素数量不匹配<thead> 个元素。