Datatables.js - hyperlink from URL JSON data

Question

I have some JSON sample data, which has a URL object. When I add the data into a datatable, I am getting the URL as text, instead of a link.

var items = [    
    {
    "Alert": "Alpha",
    "Date": "23/04/2021",
    "Information": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a ultrices nisl, ac interdum libero. Vestibulum ac convallis mauris, auctor hendrerit augue. Vivamus elementum sapien eget dui maximus, quis laoreet magna pulvinar. Sed feugiat hendrerit est, et tincidunt lorem pellentesque nec. Quisque consequat laoreet eros in porta.",
    "Name": "Tester",
    "Status": "Live",
    "URL": "https://www.google.com/",
    "Updated": "21/04/2021 09:35"
}
]

Datatable:

$(document).ready(function () {
 var items = JSON.parse(request.responseText);
$('#thisTable').dataTable({
    "aaData": items,
    columns: [
        { title: "Date", "mDataProp": "Date" },
        { title: "Status", "mDataProp": "Status" },
        { title: "Alert", "mDataProp": "Alert" }, 
        { title: "Updated", "mDataProp": "Updated"},
        { title: "Name", "mDataProp": "Name" },
        { title: "Information", "mDataProp": "Information" },
        { title: "URL", "mDataProp": "URL"}      
    ],     
}); 
});

I have read through the documentation, which references assigning a function to pick up the URL, however when I include the below I am just getting a console error. First time trying to use datatables with a JSON source, which is a little more complex.

"data": "URL",
    "render": function ( data, type, row, meta ) {
      return '<a href=" + URL +">LINK</a>';
    }

andrewJames · Accepted Answer · 2021-04-23 13:47:58Z

2

There are a couple of issues here:

The code to build your link HTML needs to be changed. Right now, you are just building a single string surrounded by ':

return '<a href=" + URL +">LINK</a>';

So, the variable name in that string is not treated as a variable. It's just taken literally as a piece of text.

Instead, use this:

return '<a href="' + data + '">LINK</a>';

(The use of data instead of URL is explained below).

You can combine your column renderer into your URL column definition. And you can use the render function's data variable (see below).

There is a 3rd (optional) update - which is to replace the older variable names (for example aaData) with their newer versions (data). You can see a listing of these old and new names here.

Combining all of the above points gives this:

$('#thisTable').dataTable({
    "data": items,
    columns: [
        { title: "Date", data: "Date" },
        { title: "Status", data: "Status" },
        { title: "Alert", data: "Alert" }, 
        { title: "Updated", data: "Updated"},
        { title: "Name", data: "Name" },
        { title: "Information", data: "Information" },
        { 
          title: "URL", 
          data: "URL",
          render: function ( data, type, row, meta ) {
            return '<a href="' + data + '">LINK</a>';
          }
        }      
    ]
});

In the URL column I use data: "URL" to assign the URL value to a variable called data, which DataTables then uses in the render function.

answered Apr 23, 2021 at 13:47

andrewJames

22.6k11 gold badges32 silver badges72 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

JS_basic_knowledge Over a year ago

Thank you. Was trying all kinds of variations. Didn't realise that I should have also included title with the Url section. Your help was greatly appreciated.

Collectives™ on Stack Overflow

Datatables.js - hyperlink from URL JSON data

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related