将 ForEach 表转换为 Datatable Jquery 表的简单方法？

Question

我正在尝试通过单击标题进行排序来实现数据表的排序功能。 我目前正在使用这样的 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">&times;</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 { fieldValidatorId = fieldValidator.Id, vaccineTypeStatusId = Model.Id }, new { @class = "btn btn-danger" })
                    </div>
                </div>
            </div>
        </div>
      </td>
    </tr>
 }
  </tbody>

Answer 1

您只需按照https://datatables.net/ 中的指南进行操作即可。

用forEach没问题。这是一个示例。希望能帮到你，我的朋友:))

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