Easy way to convert ForEach table into Datatable Jquery table?

Question

I'm trying to implement the sorting functionality of Datatables by clicking on the headers to sort. I'm currently loading my data using a ForEach like so. Is there an easy way to implement the sorting functionality in my scripts? Thank you

    <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

You just need to follow the guide in https://datatables.net/.

It has no problem if you used forEach. Here is a sample:

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