0

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?

1 Answer 1

0

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'/>");
                }
            }
        }],

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.