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?