How to add a hyperlink to certain cells?

mmcnair80

I would like to be able to add a hyperlink to certain cells, but only on some of my DataTables. I am using server side processing. I want to create a hyperlink to a form that I created that would allow for editing of some of the fields in the table row, then once editing is complete return them to the same table state that they left.

I'm able to create the column and make the data from the rest of the table move over to accommodate this, but I can't figure out how to fill the cell with a hyperlink.

tangerine

https://datatables.net/reference/option/columns.render

IsaacBen

Here is what I do to add links to certain cells. Of course modify it for you own use.

            "columns": [
                { "data": "id", "name": "id",
                    fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                        $(nTd).html("<a href='/tickets/"+oData.id+"'>"+oData.id+"</a>");
                    }
                },
                { "data": "client_name", "name": "client_name",
                    fnCreatedCell: function (nTd, sData, oData, iRow, iCol) {
                        if(oData.client_name) {
                            $(nTd).html("<a href='/clients/"+oData.client_id+"'>"+oData.client_name+"</a>");
                        }
                    }
                },
                { "data": "location", "name": "location", "defaultContent": "" },
                { "data": "priority", "name": "priority" },
                { "data": "status", "name": "status" },
                { "data": "date", "name": "date" },
                { "data": "due_date", "name": "due_date" },
            ],

You can read here more about it - https://datatables.net/reference/option/columns.createdCell

Not sure if this is what you meant though.

mmcnair80

@IsaacBen That is great except that it creates the hyperlink on all tables. How would I set it up to only create the hyperlink when the heading is "Edit" instead of always? Or when the heading is not "Id" if that is easier?

allan

I would suggest using columns.render to create links. There is an example in its documentation.

I would suggest against using columns.createdCell to change the contents of the cell. Its sort of okay in the above example since it doesn't effect filtering and sorting, but its a slippery slope...

Allan

mmcnair80

What I have added to my initialization is this:

columnDefs: [
{
    targets: 0,
    render: function (data, type, row, meta)
    {
        if (type === 'display')
        {
            data = '<a href="FormToEdit.php?everything=' + encodeURIComponent(data) + '">Edit</a>';
        }
        return data;
    }
}],

But this changes all the tables to have the first column with a hyperlink. I only need the hyperlink o some of them. How would I modify this so that it will check if the header is "Id" or "Edit" and add the hyperlink if the header is "Edit"?

allan

We'd really need a link to the page showing the issue. Here is an example showing it not applied to all tables: http://live.datatables.net/hofaburu/1/edit .

Allan

mmcnair80

I'm not able to get the exact same results as I get in my environment, but this is close ( I can't get the buttons to show up or some of my styles, not worried about the styles as much though). I don't have multiple tables on the same page. Each report that I run is on its own page so I don't have different initialization scripts. All the tables have the same Id.

Now, what I want to do is make it so that it checks the header and if the header is "Edit" ( in the first column) then it adds the hyperlink. Otherwise, it leaves the column alone.

Is that possible?

allan

All the tables have the same Id.

Hopefully not on the same page? That wouldn't be valid HTML if so.

Now, what I want to do is make it so that it checks the header and if the header is "Edit" ( in the first column) then it adds the hyperlink.

You would need to set up the array that you pass into the columnDefs option before you initialise the DataTable. You could have a simple if statement that checks to see if the Edit entry is in the table's header cell(s) and if so push the object onto the array that will render the links.

Allan

mmcnair80

Hopefully not on the same page? That wouldn't be valid HTML if so.

No not on the same page. Each report is on its own page, I don't show more than one at a time.

I've decided to go a different way though and give the tables that I want to edit a different ID. Now I initialize them differently. The only difference though is the adding of the hyperlink as explained above.

Thank you all for helping.

cfuentesc@gmail.com

Hi, I have the following problem when I send
$(nTd).html("<a href=javascript:window.opener.document.forms['frgrm']['ciudad'].value='"+oData.ca_ciudad_establecimiento+"';>"+oData.ca_id_cliente+"</a>");

If oData.ca_ciudad_establecimiento of the string has blanks "<a href does not work

How can I send oData.ca_ciudad_establishment completely

allan

@cfuentesc@gmail.com - This thread is almost a year old. Could you open a new discussion with a link to a page showing the issue please.

Allan

eduardo.frigini

Thanks IsaacBen. You help me a lot.