PDF Export customiztion:Text change color based on the cell value for one or two columns?

mabdulrazzaq

simplest things gets too complicated!
I'm trying to change the color of the text or fill color in the cell for one or two specific columns, I Know PDFMaker is not supporting that yet "hopefully in the future".
I've tried this code

cycles= table.column(11).data().toArray();
for (var i = 0; i < age.length; i++) {
if (cycles[i] < 40) {
doc.content[1].table.body[i+1][11].fillColor = 'red';
}
}

but for some reason the pdf extract stays in loading status and never export the pdf
how ever one part works if i apply it only for one row

doc.content[1].table.body[1][11].fillColor = 'red';

not for the entire PDF through the for loop

need some help please

and here is my PDF export button customize section

{
className: "btn btn-warning",
text: 'PDF Export Selected',
extend: 'pdfHtml5',
customize: function(doc) {

                        doc.content[1].table.body[1][11].fillColor = 'red';
                        //Remove the title created by datatTables
                        doc.content.splice(0, 1);
                        //Create a date string that we use in the footer. Format is dd-mm-yyyy
                        var now = new Date();
                        var jsDate = now.getDate() + '-' + (now.getMonth() + 1) + '-' + now.getFullYear();
                        // Logo converted to base64
                        // var logo = getBase64FromImageUrl('https://datatables.net/media/images/logo.png');
                        // The above call should work, but not when called from codepen.io
                        // So we use a online converter and paste the string in.
                        // Done on http://codebeautify.org/image-to-base64-converter
                        // It's a LONG string scroll down to see the rest of the code !!!
                        var logo =
                            'data:image/png;

                        // It's important to create enough space at the top for a header !!!
                        doc.pageMargins = [20, 60, 20, 30];
                        // Set the font size fot the entire document
                        doc.defaultStyle.fontSize = 8;
                        // Set the fontsize for the table header
                        doc.styles.tableHeader.fontSize = 9;
                        // Create a header object with 3 columns
                        // Left side: Logo
                        // Middle: brandname
                        // Right side: A document title
                        doc['header'] = (function() {
                            return {
                                columns: [
                                    {
                                        image: logo,
                                        width: 120
                                    },
                                    {
                                        alignment: 'left',
                                        italics: true,
                                        text: 'KALITTA CHARTERS II ' + $("#aircraft").text() +
                                            ' AIRFRAME AD',
                                        fontSize: 14,
                                        margin:[10,0],
                                        width:'*'
                                    },
                                    {
                                        alignment: 'right',
                                        italics: true,
                                        text:[
                                            {text: 'Hours: ' +$("#TATlable").text() , bold: true},  {text: '  Current TAT: ' + ctat, bold: true},
                                            {text: '\n\nCycles: ' +$("#TAClable").text() , bold: true},  {text: '  Current TAC: ' + ctac, bold: true},
                                            {text: '\n\nDays: ' +$("#days").text() , bold: true}, {text: '  Current Date: ' + cdate, bold: true}
                                            ],

                                        fontSize: 6,
                                        margin: [10, 0]
                                    },
                                    {
                                        alignment: 'right',
                                        fontSize: 6,
                                        text: 'Employee Email :' + $("#empName").text()
                                    }
                                ],
                                margin: 20
                            }
                        });

                        // Create a footer object with 2 columns
                        // Left side: report creation date
                        // Right side: current page and total pages
                        doc['footer'] = (function(page, pages) {
                            return {
                                columns: [
                                    {
                                        alignment: 'left',
                                        text: ['Created on: ', { text: jsDate.toString() }]
                                    },
                                    {
                                        alignment: 'right',
                                        text: [
                                            'page ', { text: page.toString() }, ' of ', { text: pages.toString() }
                                        ]
                                    }
                                ],
                                margin: 20
                            }
                        });
                        // Change dataTable layout (Table styling)
                        // To use predefined layouts uncomment the line below and comment the custom lines below
                        // doc.content[0].layout = 'lightHorizontalLines'; // noBorders , headerLineOnly
                        var objLayout = {};
                        objLayout['hLineWidth'] = function(i) { return .5; };
                        objLayout['vLineWidth'] = function(i) { return .5; };
                        objLayout['hLineColor'] = function(i) { return '#aaa'; };
                        objLayout['vLineColor'] = function(i) { return '#aaa'; };
                        objLayout['paddingLeft'] = function(i) { return 4; };
                        objLayout['paddingRight'] = function(i) { return 4; };
                        doc.content[0].layout = objLayout;

                    },
                    orientation: 'landscape',
                    //pageSize: 'LEGAL',
                    download: 'open',
                    exportOptions: {
                        columns: ':visible'
                    },
                    title: function() {
                        return 'KALITTA CHARTERS II ' +
                            ' ' +
                            $("#aircraft").text() +
                            ' AIRFRAME AD STATUS LIST';
                    }
                }

maybe i am missing something or i have some parts are conflicting with the code

allan

I'm trying to change the color of the text or fill color in the cell for one or two specific columns, I Know PDFMaker is not supporting that yet "hopefully in the future".

If its not supported in pdfmake, then its not something that would be possible in DataTables' PDF export since it uses pdfmake for the PDF creation.

but for some reason the pdf extract stays in loading status and never export the pdf
how ever one part works if i apply it only for one row

If you give me a link to a page showing the problem I can take a look at that. It might be that there is a Javascript error occurring (i.e. if there isn't an index 11 in an array).

Allan