How to add a hyperlink to certain cells?

How to add a hyperlink to certain cells?

mmcnair80mmcnair80 Posts: 83Questions: 21Answers: 7

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.

This question has accepted answers - jump to:

Answers

  • IsaacBenIsaacBen Posts: 35Questions: 8Answers: 4
    Answer ✓

    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.

  • mmcnair80mmcnair80 Posts: 83Questions: 21Answers: 7

    @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?

  • allanallan Posts: 51,411Questions: 1Answers: 7,752 Site admin

    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

  • mmcnair80mmcnair80 Posts: 83Questions: 21Answers: 7

    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"?

  • allanallan Posts: 51,411Questions: 1Answers: 7,752 Site admin

    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

  • mmcnair80mmcnair80 Posts: 83Questions: 21Answers: 7
    edited December 2016

    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?

  • allanallan Posts: 51,411Questions: 1Answers: 7,752 Site admin
    Answer ✓

    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

  • mmcnair80mmcnair80 Posts: 83Questions: 21Answers: 7

    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.comcfuentesc@gmail.com Posts: 1Questions: 0Answers: 0

    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

  • allanallan Posts: 51,411Questions: 1Answers: 7,752 Site admin

    @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.friginieduardo.frigini Posts: 2Questions: 1Answers: 0

    Thanks IsaacBen. You help me a lot.

Sign In or Register to comment.