问题描述
我正在尝试通过单击标题进行排序来实现数据表的排序功能。 我目前正在使用这样的ForEach加载我的数据。有没有一种简单的方法可以在脚本中实现排序功能?谢谢
<tbody>
@foreach (var fieldValidator in field.FieldValidators)
{
<tr>
<td>
@fieldValidator.Id
</td>
<td>
@fieldValidator.ValidatorType
</td>
<td>
@fieldValidator.ErrorMessage
</td>
<td>
@fieldValidator.Param1
</td>
<td>
@fieldValidator.Param2
</td>
<td>
@fieldValidator.Param3
</td>
<td>
@Html.ActionLink("Edit","EditFieldValidator",new { fieldValidatorId = fieldValidator.Id,dynamicFieldId = field.Id,dynamicFormId = Model.DynamicForm.Id,vaccineTypestatusId = Model.Id },new { @class = "btn btn-primary mb-h" })
<a href="#" class="btn btn-danger mb-h" data-toggle="modal" data-target="#confirm-delete-field-validator-@fieldValidator.Id">Delete</a>
<div class="modal fade" id="confirm-delete-field-validator-@fieldValidator.Id" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>You are about to permanently delete this field validator.</p>
<p><b>This action can NOT be undone.</b></p>
<p>Do you want to proceed?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
@Html.ActionLink("Delete","DeleteFieldValidator",new { @class = "btn btn-danger" })
</div>
</div>
</div>
</div>
</td>
</tr>
}
</tbody>
解决方法
您只需要遵循https://datatables.net/中的指南即可。
如果您使用过每一个都没有问题。这是一个样本。希望对您有帮助,我的朋友:))
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css" />
<div class="container">
<div class=" row">
<table id="myTable">
<thead>
<tr>
<th>Id</th>
<th>Name</th>
<th>Serial Number</th>
<th>Age</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model.Employees)
{
<tr>
<td>
@item.Id
</td>
<td>
@item.Name
</td>
<td>
@item.SerialNumber
</td>
<td>
@item.Age
</td>
</tr>
}
</tbody>
</table>
</div>
</div>
@section Scripts
{
<script type="text/javascript" src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function () {
$('#myTable').DataTable();
});
</script>
}