How to put hyperlink in datatable column?

nicklibee

Hello all,
How can I put hyperlink in datatable ?

Following is my code.

I am displaying only employee_name and i have a hidden value employee_id.

I want to put hyperlink to employee_name and on click of the employee_name hyperlink i want to open an modal popup by passing employee_id to the popup.

function loaddetails() {
var SelectedValue = $("#ddlListEmp").val();
$.ajax({
type: "POST",
url: '../WebService.asmx/EmployeeList',
data: '{"employee_id": "' + SelectedValue + '"}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: ServiceSucceeded,
error: function (xmlHttpRequest, textStatus, errorThrown) {
alert('Service call failed: ' + xmlHttpRequest.responseText + ' ' + textStatus);
}
});
}

    function ServiceSucceeded(result) {
        var resultObject = $.parseJSON(result.d);
       if (resultObject == "" ) {
            alert("No Result to display")
            $('#demo').html('<table width="100%" class="table table-hover table-condensed stripe compact order-column" id="example" cellspacing="0"></table>');
            oTable = $('#example').dataTable({
                destroy: true,
                data: resultObject,
                deferRender: true,
                searching: true,
                order: [[1, "desc"]],
                aoColumns: [
                 { "data": "employee_id", "title": "employee_id" },
                 { "data": "employee_name", "title": "employee_name" },
               ]
            });
        } else {
            $('#demo').html('<table width="100%" class="table table-hover table-condensed stripe compact order-column" id="example" cellspacing="0"></table>');
            oTable = $('#example').dataTable({
                processing: true,
                destroy: true,
                data: resultObject,
                deferRender: true,
                searching: true,
                order: [[1, "desc"]],                                                                 
                aoColumns: [
                { "data": "employee_id", "title": "employee_id" , sClass: "hidden" },
                    { "data": "employee_name", "title": "employee_name" },
               ]
            });
        }
    }

thanks
nick

allan

There is an example in the columns.render documentation that shows how it can be done.

Allan

nicklibee

i have gone thru that many times still iam not getting the expected result.. could you please help me?

nicklibee

My latest code is pasted below

function ServiceSucceeded(result) {
            var resultObject = $.parseJSON(result.d);
           if (resultObject == "" ) {
                alert("No Result to display")
                $('#demo').html('<table width="100%" class="table table-hover table-condensed stripe compact order-column" id="example" cellspacing="0"></table>');
                oTable = $('#example').dataTable({
                    destroy: true,
                    data: resultObject,
                    deferRender: true,
                    searching: true,
                    order: [[1, "desc"]],
                    aoColumns: [
                     { "data": "employee_id", "title": "employee_id" },
                     { "data": "employee_name", "title": "employee_name" },
                   ]
                });
            } else {
                $('#demo').html('<table width="100%" class="table table-hover table-condensed stripe compact order-column" id="example" cellspacing="0"></table>');
                oTable = $('#example').dataTable({
                    processing: true,
                    destroy: true,
                    data: resultObject,
                    deferRender: true,
                    searching: true,
                    order: [[1, "desc"]],                                                                 
                    aoColumns: [
                       { "data": "employee_id", "title": "employee_id" , sClass: "hidden" },
                       { "data": "employee_name", , "title": "employee_name",                
                        "render": function ( data, type, full, meta ) {
                 return '<a href="'+a.aspx+'">Download</a>';}, 

                   ]
                });
            }
        }

nicklibee

after changing my code like following

aoColumns: [
{ "data": "employee_id", "title": "employee_id" , sClass: "hidden" },
{
"fnRender": function ( oObj ) {
return '<a href="url?var='+oObj.aData[0]+'">SomeLink</a>';
}
},

               ]

i am getting following error.
DataTables warning: table id=example - Requested unknown parameter '1' for row 0. For more information about this error, please see http://datatables.net/tn/4

allan

Can you link to the page you are working on please? Your render function looks like it should be okay above (minus the syntax error on line 28).

Allan

nicklibee

i dont know what is going on ..anyways following is my latest code
function ServiceSucceeded(result) {
var resultObject = $.parseJSON(result.d);
if (resultObject == "" ) {
alert("No Result to display")
$('#demo').html('

');
oTable = $('#example').dataTable({
destroy: true,
data: resultObject,
deferRender: true,
searching: true,
order: [[1, "desc"]],
aoColumns: [
{ "data": "employee_id", "title": "employee_id" },
{ "data": "employee_name", "title": "employee_name" },
]
});
} else {
$('#demo').html('

');
oTable = $('#example').dataTable({
processing: true,
destroy: true,
data: resultObject,
deferRender: true,
searching: true,
order: [[1, "desc"]],
aoColumns: [
{ "data": "employee_id", "title": "employee_id" , sClass: "hidden" },
{ "data": "code", "title": "code",
"render": function ( data, type, full, meta ) {
return '<a href="'+ EmployeeDetails.aspx+'">Download</a>';}

               ]
            });
        }
    }

nicklibee

sorry,,i cant link to my wrkng page..

nicklibee

pls can anyone help me,, i need someone's help so so badly

allan

Sorry - without a link there isn't much help we can offer. There are several tools such as JSBin, JSFiddle, CodePen and http://live.datatables.net for you to provide the information we need to help you.

Allan

nicklibee

Here is the link of what I have.http://live.datatables.net/yewowapo/1/edit
I just need to put a hyperlink in emp_name and on click of the emp_name i want to open a modal popup. pls help me

allan

Thanks for the code. I don't see a columns.render function in the code. There is an example of how to create a hyperlink in the columns.render documentation.

Allan

nicklibee

I added the render and its showing me undefined,i have updated my code pls check it and please let me know whehter its correct or not.

i want to put hyperlink and on click of the hyperlink i want to open a modal popup. can you
please provide me some samples?

tangerine

I added the render

I don't see it in your js.

allan

Apparently changing the url to /2 shows it.

@nicklibee - Why have you removed the columns.data option from the column that you are rendering? Also, the else brach where you put the render function isn't being executed at all.

Allan

nicklibee

Following is my code
function ServiceSucceeded(result) {
var resultObject = $.parseJSON(result.d);
if (resultObject == "abc" ) {
alert("No Result to display");
$('#demo').html('

');
oTable = $('#example').dataTable({
destroy: true,
data: resultObject,
deferRender: true,
searching: true,
order: [[1, "desc"]],
aoColumns: [
{ "data": "emp_id", "title": "" },
{ "data": "emp_name", "title": "emp_name" },
{ "data": " emp_age.", "title": " emp_age" }
]
});
} else {
$('#demo').html('

');
oTable = $('#example').dataTable({
processing: true,
destroy: true,
data: resultObject,
deferRender: true,
searching: true,
order: [[1, "desc"]],
aoColumns: [
{ "data": "emp_id", "title": "emp_id",sClass: "hidden" },
//{ "data": "emp_name", "title": "emp_name" },
{"render": function (data, type, full, meta) { return '<a href="ab.aspx?emp_id=' + data + '">"' + data + '"</a>'; } },
{ "data": " emp_age.", "title": " emp_age" }
]
});

http://live.datatables.net/yewowapo/2/edit

nicklibee

ok removed the else and made it like what you want.
pls check it
http://live.datatables.net/yewowapo/2/edit

allan

Your DataTable isn't even initialising in that example as the Ajax request isn't returned.

Here it is modified to run: http://live.datatables.net/yewowapo/4/edit .

Allan

nicklibee

Thanks , but how will i display the modal window by passing emp_id to it? (not the emp_name);
now if you see the hyperlink is in emp_name and its passing the emp_name to the next page but i want the emp_id. (i want to hide emp_id and the emp_name should be hyerplinked).
Please help me.. please

nicklibee

i think we are too close, pls help me...

allan

Use full.emp_id. Please refer to the columns.render documentation to see the data that is passed in.

Allan

nicklibee

ok thanks,,, last help ,,, i want to open a modal popup,,, pls help...i want tio open ab.aspx as a modal window on click of hyperlink,,, pls pls help...

allan

This isn't a general programming forum. If you aren't sure how to open a modal using whatever modal library you are using, you would be best asking on StackOverflow or similar.

I'd be happy to create an example for you. The priority support rates for DataTables are available on this site.

Allan

nicklibee

i tried differnt options but its not giving me the expected op. thats the reason why iam asking..
following is my code, and i dont know where to embed this in datatable..
i did this on double click of a row ... but ii dont know where to put it in hyperlink click....

{"data": "code", "render": function (data, type, full, meta) {
var page = 'abc.aspx?code_id=' + full.emp_id + "&searchdetails=" + 2;
var $dialog = $('

')
.html('

')
.dialog({ autoOpen: false, modal: true, height: 625, width: 880, title: "factory Details" });
$dialog.dialog('open');
return $dialog.dialog('open'); + data + '</a>';
} },
after putting the above in my code, the system freezed....\
dont know whether this is correct or not

allan

Its not - you can't return a jQuery object from columns.render. You return a string, as noted in the documentation. If you want to trigger a Javascript action, assign an event handler to it. See the jQuery $().on() documentation for how to do that.

nicklibee

sorry i tried different options, i cant get the expected result.. something is going wrong somewere...
following is my code
{ "data": "emp_name", "render": function (data, type, full, meta) { return '<a href="#" onclick="return TestMethod(full.emp_id,2)" >' + data + '</a>'; } },

created a div tag in html.

function TestMethod(parameter1, parameter2) {
var mydiv = $('#mydiv');
mydiv.dialog({ autoOpen: false });
mydiv.load('empDetails.aspx?code_id=' + parameter1 + '&condition=' + parameter2);
mydiv.dialog('open');
return false;
}

on click of the name its not redirecting to the details page,,,i seriously dont know what is happening,, pls help me...
pls help me

sciszewski@salesapex.com

Make sure you load jquery ui. That's what you're assuming when you create the dialog object.