I was not able to add EDIT button in a Jquery datatable MVC ASP.NET (C#)

Viewed 76

Need help with this, i'm super stuck:

I dedided to use a jquery datatable but i was not able to create the EDIT button, i need to convert this:

<td>
@Html.ActionLink("EDIT", "Edit", new { id = item.code })    
</td>

Need help modifying my code, somebody?

This is my CODE:

@model IEnumerable<WebApplication.Models.Approval>

@{
    ViewData["Title"] = "Approvals";
}

<h1>Approvals</h1>

<table class="table" id="Exampledatatable">
    <thead>
        <tr>
            <th>
                @Html.DisplayNameFor(model => model.CODE)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.EMAIL)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.FIRSTNAME)
            </th>
            <th>
                @Html.DisplayNameFor(model => model.LASTNAME)
            </th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
        <tr>
            <td>
                @Html.DisplayFor(modelItem => item.CODE)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.EMAIL)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.FIRSTNAME)
            </td>
            <td>
                @Html.DisplayFor(modelItem => item.LASTNAME)
            </td>
            <td>
                @Html.ActionLink("EDIT", "Edit", new { id = item.code })    
            </td>
        </tr>
        }
    </tbody>
</table>


@section scripts{
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/dt-1.10.23/af-2.3.5/datatables.min.css" />

    <script type="text/javascript" src="https://cdn.datatables.net/v/dt/dt-1.10.23/af-2.3.5/datatables.min.js"></script>
    <script>
        $(document).ready(function () {
            $('#Exampledatatable').DataTable({
                

            })
        });
    </script>
}

I've been searching and it could possible to use something like this (it is just an example):

   "aoColumns": [
          { mData: 'title' } ,
          { mData: 'name' },
          { mData: 'year_name' },
          { 
             mData: '',
             render: (data,type,row) => {
               return `<a href='link_to_edit/${row.id}'>update</a>`;
             }
          }
        ]

Can help me to modify my code? I am super lost

0 Answers
Related