Easy way to convert ForEach table into Datatable Jquery table?

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="#<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="63000c0d050a110e4e07060f0617064e050a060f074e15020f0a0702170c114e23050a060f0735020f0a0702170c114d2a07">[email protected]</a>">Delete</a>
        <div class="modal fade" id="<a href="https://getridbug.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e1828e8f8788938ccc85848d849584cc8788848d85cc97808d888580958e93cca18788848d85b7808d888580958e93cfa885">[email protected]</a>" 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>

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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

It has no problem if you used forEach. Here is a sample. Hope to help, my friend :))

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0