Jquery datatables HTML actionlink, how to add edit button using foreach

Question

I've been struggling with this for a while and i do not know how to solve it.

I decided to use a DATATABLE but i could not make it work on my previous model, everything works just fine but the EDIT button is not even working. Dont want to use AJAX or something like that, just the information retrieved in my FOREACH

This is my code (do NOTE that i used a foreach):

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

The problem is in my script

I tried to use something like this:

<script type="text/javascript">    
    $(document).ready(function () {
        $('#myDataTable').dataTable({
            aoColumns: [
                      null, // first column (CODE)
                      null, // second column (EMIAL)  
                      null, // third (FIRSTNAME)
                      null, // fourth (LASTNAME)

                      {     // fifth column (Edit link)
                        "sName": "CODE",
                        "bSearchable": false,
                        "bSortable": false,
                        "fnRender": function (oObj)                              
                        {
                            // oObj.aData[0] returns the CODE
                            return "<a href='/Edit?id=" 
                                + oObj.aData[0] + "'>Edit</a>";
                        }
                       }

                   ]
     });  
}); 
</script>

How can i make it work? Can help me?

EDIT:

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

I am using this but it does not work on Jquery datatables:

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

If i run this code, my application works just fine:

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

The problem comes when i try to implement the DATATABLE using JS and the HTML ACTION LINK.

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

Not matter what i try cannot make it work

One thing that springs to mind is that there's a mismatch between your columns headers and your rows - looks as though you have 4 column headers and 5 columns in the table body. Perhaps add an empty column header and try again - if not work up a simple JSFiddle (or alternative) and we can take another look? — annoyingmouse, Feb 22 '21 at 08:11
Hey pal, thanks for replying: Take a look (i just edited my theread). The problem is that @Html.ActionLink("EDIT", "Edit", new { id = item.code }) is not allowed in Jquery datatables, i should get rid of it but how would you make it work? — JustToKnow, Feb 22 '21 at 13:45
What does a `@Html.ActionLink("EDIT", "Edit", new { id = item.code })` resolve to in terms of raw HTML. An anchor tag? If so then it should just work. I'm still pretty sure that, if you're thead hasn't changed, then you'll be running into an issue of the HTML being ill-formatted. — annoyingmouse, Feb 22 '21 at 14:02
Pal, take a look at it; been searching for a while: https://stackoverflow.com/questions/11256864/jquery-datatables-actionlink-how-to-add — JustToKnow, Feb 22 '21 at 14:09
In the example shown above they are using AJAX but in my case i am getting all the information by using a FOREACH — JustToKnow, Feb 22 '21 at 14:10
@annoyingmouse "You can't use the Html.ActionLink helper because you have to generate the links dynamically from the javascript. The aoColumns property helps you to configure each columns, if you don't want to configure a particular column just pass null else you have to pass an object({})." — JustToKnow, Feb 22 '21 at 14:12
What's the output without invoking a DataTable? Is that broken? Does the ActionLink work? — annoyingmouse, Feb 22 '21 at 16:52
@annoyingmouse Without using DATATABLE script my application works just fine (i have updated my thread). The problem is that i do not really understand how to get rid of the HTML ACTION LINK in the HTML and make it work on the js script. Do you get me? Any clue? — JustToKnow, Feb 22 '21 at 17:09
I don't use Razor but would using `@Html.Raw(item.code)` work? Once you've got the id of the item then using a render function should be a doddle. — annoyingmouse, Feb 22 '21 at 20:20
Hey pal. I do not completely understand. You mean replace: *@Html.ActionLink("EDIT", "Edit", new { id = item.code })* by *@Html.Raw(item.code)*? — JustToKnow, Feb 22 '21 at 20:24
Yeah, or anything that outputs the id of the item as a string. — annoyingmouse, Feb 22 '21 at 20:32
I'm sorry, you were right!!, i needed to add another . Thanks!! — JustToKnow, Feb 22 '21 at 20:36

Jquery datatables HTML actionlink, how to add edit button using foreach

0 Answers0