简体   繁体   中英

Change row background color pdf export dataTable

I need to check if the value of a column is negative and at the time of exporting to PDF, and if so, make that whole cell turn red or text-decoration: line-through.

However I do not know how to access the elements to make such a modification.

I can modify the background when it is being displayed in the browser but when exporting it does not work the same way.

I use http://datatables.net/

    {
        extend: 'pdfHtml5',
        footer: true,
        text: 'PDF',
        header: true,
        title: t,
        orientation: 'landscape',
        exportOptions: {
            rows: function ( idx, data, node ) {
                //node.attributes.style = {background-color: "#000";};
                //console.log(node.attributes.style);
                //return true;
                // return data[2] === 'London' ?
                // true : false;
            }
        },
        customize: function(doc) {

            doc.content.splice( 1, 0, {
                margin: [ 0, 0, 0, 0 ],
                alignment: 'center',
                image: base64
            } );
            doc.defaultStyle.fontSize = 10;
            doc.pageMargins = [20,10,10,10];
            doc.styles.tableHeader.fontSize = 14;
            doc.styles.title.fontSize = 12;
            // Remove spaces around page title
            doc.content[0].text = doc.content[0].text.trim();
        } 

    },
    {
        extend: 'print',
        footer: true,
    }

    ],

    fnRowCallback: function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
        var valor = aData[3].split('$');
        //console.log(teste);
        if (parseInt(valor[1])<0) { 
            $(nRow).css('background-color', '#e96464')
        }else{
            $(nRow).css('background-color', '#cdedc1')
        }
    }

});

I just posted an answer in the DataTablesforum for a similar question. The solution is to modify the table in the PDF document in the customize callback.

buttons: [
  {
    extend: "pdfHtml5",
    customize: function(doc) {
      age = table.column(3).data().toArray();
      for (var i = 0; i < age.length; i++) {
        if (age[i] < 40) {
          doc.content[1].table.body[i+1][3].fillColor = 'blue';
        }
      }
    }
  }
]

Live example here.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM