Add Link Column to DataTable After Ajax Call MVC

Question

On my view page I have a table (from a partial view) and a form. I am using ajax to submit the form to my webapi controller.

On success I would like to add what was entered in the textbox to the first column, and links to Edit and Delete in the second column of a new row.

As of right now I am only working on the Edit link.

Here is my partial view table:

<table id="Table" class="table table-bordered">
    <thead>
        <tr>
            <th class="col-md-6">
                @Html.DisplayNameFor(model => model.Name)
            </th>
            <th></th>
        </tr>
    </thead>


    @foreach (var item in Model)
    {
        <tr>
            <td class="col-md-6">
                @Html.DisplayFor(modelItem => item.Admin)
            </td>
            <td class="col-md-6">
                @Html.ActionLink("Edit", "Edit", new { id = item.ID }) |
                @Html.ActionLink("Delete", "Delete", new { id = item.ID })
            </td>
        </tr>
    }

</table>

Here is my form jquery.ajax:

var table = $("#Table").DataTable({
    "aoColumnDefs": [
        { "bSortable": false, "aTargets": [1] },
        { "bSearchable": false, "aTargets": [1] }
    ]
});

$("form").submit(function(e) {
    e.preventDefault();

    $.ajax({
        url: infoGetUrl,
        method: "post",
        data: $("form").serialize()
    }).success(function (data) {
        var editLink = document.createElement('a');
        editLink.href = "/controllerName/Edit/" + data.id;
        editLink.text = "Edit";

        table.row.add([
            $("#Textbox").val(),
            editLink
        ]).draw();
    }).error(function(jqXHR, textStatus, errorThrown) {
        console.log("error");
    });
});

The problem is that when this renders I get this:

It is not clickable and renders like this:

<tr class="even" role="row">
    <td class="sorting_1">John.Doe</td>
    <td>http://localhost:61888/controllerName/Edit/15</td>
</tr>

As you can see, it is not rendered in an a tag, and I don't need the http://localhost:61888 part of the link.

How can I resolve this?

try creating link as var link = <a href='/controllerName/Edit/' + data.id>EDIT</a> — Shantaram Tupe
– Shantaram Tupe, Commented Jun 28, 2017 at 13:52
@shantaram_t that worked. thank you. post as answer and I will accept — Grizzly
– Grizzly, Commented Jun 28, 2017 at 14:09

Shantaram Tupe · Accepted Answer · 2017-06-28 14:25:10Z

1

try creating link as:

var link = <a href='/controllerName/Edit/' + data.id>EDIT</a>

answered Jun 28, 2017 at 14:25

Shantaram Tupe

1,6664 gold badges17 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

sheplu · Accepted Answer · 2017-06-28 13:58:12Z

0

With pur JS:

var link = document.createElement('a'); 
link.textContent = 'Edit';
link.href = "/controllerName/Edit/" + data.id;

you just need to place this inside your td. If you want to remove 'http://localhost:61888' you can just use replace to change your localhost by un empty string. Or split your string and just keep the second part

answered Jun 28, 2017 at 13:58

sheplu

2,9853 gold badges26 silver badges21 bronze badges

Collectives™ on Stack Overflow

Add Link Column to DataTable After Ajax Call MVC

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related