How to call fnRender dynamically?

Brindha

Hello friends,

My requirement is based on the user defined column arrary, i have to create aoColumns. But fnRender is not working as expected, like im trying to display icon+text.

Please help me to solve this issue, its urgent.

---

var userDefinedColumn = ["position"];

var dataTable = null;

var columnMap = {
"name":{
"mDataProp" :"name",
"title": "Name",
"bSortable": false,
"bVisible": true,
"fnRender" : function(oObj,val){
return "<span>"+val+"</span>";
}
},
"position":{
"mDataProp" :"position",
"title": "Position",
"bVisible": true,
"bSortable": false,
"fnRender" : function(oObj,val){
return "<i class='add' rid='"+oObj.aData.name +"'></i><span>"+val+"</span>";
}
}
}

function fnGetTableColumn(){
var aoColumn = [];
for(var index=0;index<userDefinedColumn.length;index++){
var obj = userDefinedColumn[index];
aoColumn.push(columnMap[obj]);
}
fnRenderTable(aoColumn);
}

function fnRenderTable(aoColumn){
dataTable = $("#table-example").dataTable({
"bProcessing" : false,
"bServerSide" : false,
"sAjaxSource" : 'sample1.json',
"sAjaxDataProp" : "data",
"aoColumns" : aoColumn
});
}

$( document ).ready(function() {
fnGetTableColumn();
});

The issue in above code is fnrender function is not working as expected.

Expected Result: <td><i class="add" rid="1"></i><span>Developer</span></td>

Actual Result : <td>Developer</td>