Overriding text in datatable with icons

Question

In reference to this page, I'm trying to replace the text with icons but not getting the desired results.

function mySuccessHandler(data) {
try {
    var dataTableExample = $('#table_id').DataTable();
        if (dataTableExample != 'undefined') {
            dataTableExample.destroy();
        }

    dataTableExample = $('#table_id').DataTable({
        "rowCallback": function (row, data, index) {
            if(data[2] == 'In') {
                return "<img src='/_layouts/images/KPIDefault-0.GIF'/>"; //replace with icon
                }
            },
        "pageLength": 25, //default is 10, set number of items per page
        "paging": true, //page navigational buttons
        "info": true, //display total of items at the bottom of the table 
        srollY: 300, 
        "aaData": data.d.results,
        "aoColumns": [
            { "mData": "Title" },
            { "mData": "InOut" },
            { "mData": "TodaySchedule" }
        ]
    });

} catch (e) {
    alert(e.message); }
}

I was using the code below before but not on a datatable:

(function() {
var oFldCtx = {};
oFldCtx.Templates = {};
oFldCtx.Templates.Fields = {"InOut": {"View": overrideStatus} };
SPClientTemplates.TemplateManager.RegisterTemplateOverrides(oFldCtx);
})();

function overrideStatus(ctx) {
var oStatus = ctx.CurrentItem.InOut;

if (oStatus == 'In')    {
    return "<img src='/_layouts/images/KPIDefault-0.GIF'/>";
}
if (oStatus == 'Out-A')     {
    return "<img src='/_layouts/images/KPIDefault-2.GIF'/>";
}
if (oStatus == 'Out-P')     {
    return "<img src='/_layouts/images/KPIDefault-1.GIF'/>";
}

}

How do I combine both?

Answer 1

I figured it out using columnDefs

dataTableExample = $('#table_id').DataTable({
        "pageLength": 25, //default is 10, set number of items per page
        "paging": true, //page navigational buttons
        "info": true, //display total of items at the bottom of the table 
        //"order": [[0, "asc"]] //0 = column 1
        "columnDefs": [ {
            "targets": 1,
            "createdCell": function (td, cellData, rowData, row, col) {
                if(cellData == 'In') {
                    $(td).html("<img src='/_layouts/images/KPIDefault-0.GIF'/>");

                }
                if(cellData == 'Out-A') {
                    $(td).html("<img src='/_layouts/images/KPIDefault-1.GIF'/>");
                }
            }
        }],