Showing displayed url links from JSON file clickable to download a file

[Deleted User]

Hi There,

I've had a look at this and don't get it. https://datatables.net/reference/option/columns.render

I need to show column 3 display data (url's) as clickable.

$(document).ready(function() {
$('#example').DataTable( {
    "columnDefs": [ {
    "targets": 3,
    "data": "download_link",
    "render": function ( data, type, row, meta ) {
      return '<a href="'+data+'">Download</a>';
    }
  } ]
    <!--"serverSide": true,-->
    <!--"processing": true,-->
    "ajax":{
        "url":"https://opendata.arcgis.com/datasets/TheFile.geojson",
        "dataSrc": "features"
        <!--"dataSrc": "tableData"-->
    },
    "columns": [
      { "data": "properties.BoreholeId"},
      { "data": "properties.ArchiveId" },
      { "data": "properties.Description" },
      { "data": "properties.UNCPath" },
    ],
    dom: 'lfrtBip',
        buttons: [
            'copy', 'csv'
        ]
  });

Is this possible with the column render api?

Cheers

RockE

colin

Yep, that's possible, the problem is that you're defining columnDefs and columns, so the former will be over-written.

Try this instead:

$(document).ready(function() {
$('#example').DataTable( {
    <!--"serverSide": true,-->
    <!--"processing": true,-->
    "ajax":{
        "url":"https://opendata.arcgis.com/datasets/TheFile.geojson",
        "dataSrc": "features"
        <!--"dataSrc": "tableData"-->
    },
    "columns": [
      { "data": "properties.BoreholeId"},
      { "data": "properties.ArchiveId" },
      { "data": "properties.Description" },
      { "data": "properties.UNCPath", "render": function ( data, type, row, meta ) {
      return '<a href="'+data+'">Download</a>';
    } },
    ],
    dom: 'lfrtBip',
        buttons: [
            'copy', 'csv'
        ]
  });

Colin

[Deleted User]

Awesome thanks Colin

[Deleted User]

The properties.UNCPath was already a URL so I wanted to display that, I found this reference return '<a href="'+data+'">'+data+'</a>'; which was what I was looking for.

[Deleted User]

Is it possible to modify this part

{ "data": "properties.UNCPath", "render": function ( data, type, row, meta ) {
return '<a href="'+data+'">Download</a>';
} },
],

So that if the data is null it doesn't display a download link just a blank space?

kthorngren

Use an if statement and if the data is null use return ""; else return the link.

Kevin

[Deleted User]

Thanks Kevin, is that a datatables specific if statement or standard javascript? I don't know javascript if it is so will need to search for it :-)

kthorngren

Standard Javascript. It would look something like this:

{ "data": "properties.UNCPath", "render": function ( data, type, row, meta ) {
      // Return blank if null data.
      if ( data == null ) {
        return '';
      }

      //. Otherwise return the hyperlink.
      return '<a href="'+data+'">Download</a>';
    } },

Didn't test it so there maybe syntax errors.

Kevin

[Deleted User]

Thanks Kevin, I'll give that a whirl or try this https://www.w3schools.com/js/js_if_else.asp