I implemented a responsive dataTable for mobile (iPhone), it is showing all the columns except for the last column with the CRUD action links, like Edit, Details, and Delete.
The dataTable is also not showing the plus icon to expand & close certains columns. What am I missing in creating the 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>
I was missing a JavaScript tag for responsive dataTable and the number of children of my <tr>
element didn't match the number of <th>
elements that were a child of the <thead>
element."