Urlize DRF Link

Question

I have a DRF serializer:

class ActivitySerializer(serializers.ModelSerializer):
    link = serializers.CharField(source='get_analytic_link', allow_null=True)
    class Meta:
        model = Activity
        fields = ['link',]

In the browsable API, the links are clickable. However, when they are served up to a DataTable via a JSON endpoint, they are (predictably) not clickable. In plain Django, I would do something like this:

<td>{{ activity.get_analytic_link|urlize }}</td>

How could I replicate that behavior in DRF so that links are clickable?

Answer 1

It looks like this a job on the frontend, and you should use DataTable's columns.render feature.

Example:

var responseObj = [
    { "information": "A1", "weblink": "http://www.microsoft.com" },
    { "information": "A2", "weblink": "http://www.yahoo.com" },
    { "information": "A3", "weblink": "http://www.google.com" },
    { "information": "A4", "weblink": "http://www.duckduckgo.com" }
];

$('#example').dataTable({
   "data": responseObj,
   "columns": [
      { "data": "information" }, 
      { 
         "data": "weblink",
         "render": function(data, type, row, meta){
            if(type === 'display'){
                data = '<a href="' + data + '">' + data + '</a>';
            }

            return data;
         }
      } 
   ]
});