移动响应数据表中未显示列

Question

我实现了用于手机（iPhone）的响应式数据表，它显示除具有CRUD操作链接的最后一列以外的所有列，例如“编辑”，“详细信息”和“删除”。

Mobile View

Desktop View

dataTable也不显示加号图标来展开和关闭某些列。创建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>元素数不匹配。“

Answer 2

您可以轻松地使dataTable响应请按照以下链接上的简单步骤操作

[[1]：

https://geekstopper.blogspot.com/2020/05/ui-related-problems.html

[[2]：

https://geekstopper.wordpress.com/2020/05/29/resposive-datatable-in-jsp-html/

谢谢