如何动态调用fnRender？

Question

我的要求是基于用户定义的列数组，我必须创建aoColumns。但fnRender并没有按预期工作，就像我试图显示图标+文字一样。

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();
});

上面代码中的问题是fnrender函数没有按预期工作。

预期结果：

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

实际结果：

<td>Developer</td>