Exporting jQuery datatable data with cell colors

Question

I am exporting data from jQuery datatable using TableTools in different formats like excel, pdf. Some cells have a different background color in datatable. But those colors are not displaying in exported excel or pdf. Can anyone tell me, how to solve this problem?

Here is the code for datatable:

var wdm_without_groupcode_attendee_table = jQuery("#wdm_without_groupcode_attendee_table").DataTable({
    "dom": 'CT<"clear">lfrtip',
            "tableTools": {
                        "sSwfPath": wdm_new_reports_localize_data.wdm_swf_path , //Getting path from localize script
                        "aButtons": [ 
                                    {
                                        "sExtends": "copy",         
                                        "oSelectorOpts": { filter: "applied", order: "current" }
                                    },
                                    {
                                        'sExtends': 'xls',         
                                        "oSelectorOpts": { filter: 'applied', order: 'current' }
                                    },
                                    {
                                        'sExtends': 'print',               
                                        "oSelectorOpts": { filter: 'applied', order: 'current' }
                                    },
                                    {
                                        'sExtends': 'pdf',               
                                        "oSelectorOpts": { filter: 'applied', order: 'current' }
                                    },
                                    {
                                        'sExtends': 'csv',     
                                        "oSelectorOpts": { filter: 'applied', order: 'current' }
                                    }]
                        },
            "aoColumns": [
                    {sClass: "alignLeft"},
                    {sClass: "alignLeft"},
                    {sClass: "alignCenter"},
                    {sClass: "alignCenter"},
                    {sClass: "alignCenter"},
                    {sClass: "alignCenter"},
                    {sClass: "alignCenter"},
                    {sClass: "alignCenter"},
                    {sClass: "alignLeft"},
                    {sClass: "alignCenter"},
                    {sClass: "alignCenter"}
                    ],
            "createdRow": function ( row, data, index ) {


                jQuery('td',row).eq(4).addClass('DARK_BLUE');
                jQuery('td',row).eq(5).addClass('ORANGE');
                jQuery('td',row).eq(6).addClass('RED');

                //to decide color of cells
                if ( data[2].toLowerCase().indexOf("yes") >= 0 ) {
                    jQuery('td', row).eq(2).addClass('SKY_BLUE');
                }
                if ( data[3] >= 1 ) {
                    jQuery('td', row).eq(3).addClass('DARK_BLUE');
                }
                if ( data[7].toLowerCase().indexOf("yes") >= 0 ) {
                    jQuery('td', row).eq(7).addClass('DARK_BLUE');
                }
            }
});

Answer 1

i'm not sure but it looks like you are coloring the TDs after TR fully created so try this createdCell instead.

"aoColumns": [
    {sClass: "alignLeft"},
    {sClass: "alignLeft", createdCell: function (td, cellData, rowData, row, col) {
        if (cellData >= 1 )
            $(td).addClass('DARK_BLUE');
    }},
    {sClass: "alignCenter", createdCell: function (td, cellData, rowData, row, col) {
        if (cellData.toLowerCase().indexOf("yes") >= 0 )
            $(td).addClass('SKY_BLUE');
    }},
    {sClass: "alignCenter DARK_BLUE"},
    {sClass: "alignCenter ORANGE"},
    {sClass: "alignCenter RED"},
    {sClass: "alignCenter", createdCell: function (td, cellData, rowData, row, col) {
        if (cellData >= 1 )
            $(td).addClass('DARK_BLUE');
    }},
    {sClass: "alignCenter"},
    {sClass: "alignLeft"},
    {sClass: "alignCenter"},
    {sClass: "alignCenter"}
],

Answer 2

For applying cell color in exported file, You need to add coloring logic in customize method.

customize: function(xlsx) {
    var sheet = xlsx.xl.worksheets['sheet1.xml'];
    //color headers
    $('row:first c', sheet).attr('s', '42');
}

Adding header cell color