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

Please share you code what you did till now ? So that someone can modify that for you — Panther, Jun 22 '15 at 09:24

score 0 · Answer 1 · answered Jun 22 '15 at 14:43

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"}
],

Thank you @JAG for your answer. Your solution adds color to table cells but while exporting that data from table, it doesn't add those colors to pdf or xls. — ved, Jun 23 '15 at 05:10

score 0 · Answer 2 · answered Aug 29 '17 at 07:26

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

Exporting jQuery datatable data with cell colors

2 Answers2