Change PDF orientation by number of visible columns

franbriao

Hello,
I don't know if I am missing any detail from the plugin or if it is something I am missing from JQuery, but I have been struggling with it for too long already, so I am already asking for sorry if it is so simple to be solved :)
I am using the html5 PDF export, and I have been trying to change the PDF orientation accordingly to the number of visible columns. It does works with the initial table, but once I toggle any column the number doesn't update - neither the orientation.
I am trying to change the parameter by the initialization script on my HTML code.
How could I solve it?

Thanks in advance.

allan

There is currently no option to change that parameter after initialisation I'm afraid. You'd need to modify the Buttons code to add that if it is something you require.

Allan

franbriao

Hello Allan, thanks for your quick answer!
I got sort of a solution this morning, modifying the pdfhtml5 button action through datatable.js and I am leaving it here if someone needs it too.

Before "var doc = {" I put

var orientation= '';        
                var count= 0;
                $('#table').find('tbody tr:first-child td').each(function () {
                    count++;
                });
                if(count> 5){
                    orientation = 'landscape';
                }else{
                    orientation =  'portrait';
                }

and then, inside "pageOrientation" I changed from config.orientation to orientation, which is the var that I created.

allan

Looks good - thanks for sharing that with us!

Allan

obworley

How did you change the orientation by number of columns? I don't care about the hidden columns. I've been fighting this for hours. Thanks in advance if you can help.

allan

@franbriao put the code for that above. Its a modification to the buttons.html5.js file.

Allan

obworley

Got it. Worked beautifully. Thank you so much. I changed it to the following so it would work on any instance of the table. I have a couple of different configurations based on the type of table.

$("table[class^='report']").find('tbody tr:first-child td').each(function () {

psreedhar

@franbriao thanks for the code. It helped a lot. Here i have modified the code which matches for all

var orientation = '';
        var count = 0;
        $("table.dataTable").find('thead tr:first-child th').each(function () {
            count++;
        });
        if (count > 6) {
            orientation = 'landscape';
        } else {
            orientation = 'portrait';
        }

inside doc change the PageOrientation as below

pageOrientation: orientation,

moyarich

this is how i did it: my code snippet uses the
button "colvis" plugin. However, it is not dependent on that plugin. you can remove that part of the code if you don't need to use that plugin.

The orientation of the PDF is portrait by default. The code below changes the orientation to landscape if there is more than 5 columns in the table

$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
             {
                extend: 'pdf',
                exportOptions: {
                    columns: ':visible',
                    stripHtml: true
                },
                pageSize: 'LETTER',
                customize: function(doc, config) {
                  var tableNode;
                  for (i = 0; i < doc.content.length; ++i) {
                    if(doc.content[i].table !== undefined){
                      tableNode = doc.content[i];
                      break;
                    }
                  }

                  var rowIndex = 0;
                  var tableColumnCount = tableNode.table.body[rowIndex].length;
                  
                  if(tableColumnCount > 5){
                    doc.pageOrientation = 'landscape';
                  }
                }
            },
            'colvis'
          ]
    } );
} );

allan

Very clever! Thanks for sharing that with us.

Allan

kontzBern

I tried to do so as well with this tool, which is more about filling already crafted forms yet works nonetheless https://ds11.pdffiller.com/ But the orientation had seemed changed with its preview feature only - with other ones it looks the same but improper layout cut the content. Anyway, thanks for bringing this here