I have a jquery datatable on my page, which uses server side processing to retrieve data. In this case, one of the columns contains html content, thus my server responses looks like this:
"aaData": [ [1, "aaa", "<span class="myclass">html here</span>" ], ...
I tryed with
"aoColumnDefs": [ "aTargets":[2], "sType": "html" }
But I still see the cell content as if it were plain string. What can I do?
I update SamuGG's answer, for new datatable version:
"aoColumnDefs": [ {
"aTargets": [ 5 ],
"mRender": function ( data, type, full ) {
return $("<div/>").html(data).text();
}
} ]
Made a working version with
"aoColumnDefs": [
{ "aTargets": [2],
"sType": "html",
"fnRender": function(o, val) {
return $("<div/>").html(o.aData[2]).text();
}
}
]
decoding back the html with jQuery.
You need to just add below line before rawColumns() or make(true)
->escapeColumns('aaData')
Use this method and pass column name thats'it
var renderAsHtml = function (data, type, full) {
return decHTMLifEnc(data);
};
var isEncHTML = function(str) {
if(str.search(/&/g) != -1 || str.search(/</g) != -1 || str.search(/>/g) != -1)
return true;
else
return false;
};
var decHTMLifEnc = function(str){
if(isEncHTML(str))
return str.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
return str;
}
pass renderAsHtml as function reference to fnRender. This is also works
This is how I render HTML tags in my datatable columns:
ajax: "getData?userobjid=<%=session.getAttribute("userobjectid")%>&alpha=&selectsuppliersflag="+selectsuppliersflag,
columns: [
{ data: null, render: function ( data, type, row ) {
if(data.storeFrontUrl == 'undefined' || data.storeFrontUrl==null){
return "<label>"+data.companyName+"</label>";
}
else{
return "<a href='JavaScript:newPopup(\"directorylist/view/"+data.storeFrontUrl+"\");'>"+data.companyName+"</a>";
}
}},
Add .text() on render function
render: function(data, type, sop, meta) {
var sutsut = '<div class="text-wrap width-200">' + sop.info + '</div>';
return $(sutsut).text();
}
