Tom Harder Tom Harder - 23 days ago 11
jQuery Question

How can I embed an href for .NET MVC within a jQuery database column?

I am using jQuery Datatable with ajax to build a datatable. In the last column I want to add an edit link to take the user to another page to edit the data. So I want to use something link this

<a href="/Vendors/Edit/53">Edit</a>


The end result should look like

ID Name LastUpdUser LastUpdDate Edit


where
Edit
is
/Edit/IDNumber
.

My current code is

$.ajax({
url: '/Vendors/GetAllVendors',
type: 'GET',
dataType: 'json',
success: function (data) {
$('#datatable').dataTable({
data: data,
columns: [
{ 'data': 'ID' },
{ 'data': 'Name' },
{ 'data': 'LastUpdUser' },
{ 'data': 'LastUpdDate' },
{
'data': 'ID',
'render': function (data) {
return '<a href="/Vendors/Edit/"' + data + '">Edit</a>';
}
}
]
})

},


which is getting me close but the url is just
/Edit/

Answer

Welcome to SO, I have just started with DataTables and came across this problem. I had luckily followed a little tutorial and seen his buttons working.

{
    "data": "ID",
    "render": function (ID)
    {
        return '<a class="btn-xs btn-primary glyphicon glyphicon-list-alt" 
        href=/Vendors/Edit/' + ID +'></a>';
    }
}

If you notice the href has no quotes around it, job sorted and should be working for you, mine is returning edit as a bootstrap styled button.

With out styling just as you have listed it.

{
    "data": "ID",
    "render": function (ID)
    {
        return '<a href=/Vendors/Edit/' + ID +'></a>';
    }
}

I honestly can not say why the quotes throws it out, but I am playing with everything learning Datatables with MVC and ServerSide processing.

Comments