How to put hyperlink in datatable column?

nicklibee · November 2014

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 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 · November 2014

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

Allan

nicklibee · November 2014

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

nicklibee · November 2014

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 · November 2014

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 · November 2014

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 · November 2014

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 · November 2014

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

nicklibee · November 2014

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

allan · November 2014

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 · November 2014

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 · November 2014

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 · November 2014

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 · November 2014

I added the render

I don't see it in your js.

allan · November 2014

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 · November 2014

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 · November 2014

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

allan · November 2014

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 · November 2014

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 · November 2014

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

allan · November 2014

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

Allan

nicklibee · November 2014

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 · November 2014

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 · November 2014

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 · November 2014

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 · November 2014

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 · December 2014

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

How to put hyperlink in datatable column?

How to put hyperlink in datatable column?

Answers

Howdy, Stranger!

Categories

DataTables

How to put hyperlink in datatable column?

How to put hyperlink in datatable column?

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables