Print export

Print export

Andreas S.Andreas S. Posts: 113Questions: 35Answers: 2

I config the print outputs by define css classes.
In the datatable part I define the columns in the columnDefs part.

            columnDefs: [
                { targets: 0, visible: true, className: 'p-5 text-right vertical-align-top entry-nr', width: '3.5%' },
                { targets: 1, visible: true, className: 'p-5 text-left vertical-align-top entry-name', width: '25%' },
                { targets: 2, visible: true, className: 'p-5 text-center vertical-align-top entry-sex', width: '3%' },
                { targets: 3, visible: true, className: 'p-5 text-center vertical-align-top entry-yob', width: '3%' },
                { targets: 4, visible: true, className: 'p-5 text-center entry' },
                { targets: 5, visible: true, className: 'p-5 text-center entry-status' },
                { targets: '_all', visible: false, searchable: false, orderable: false }
            ],

in my button definition I define witch coulmns I need to print.

            dtButtons.push( {
                extend: 'print',
                text: '<i class="fas fa-print fa-fw" style="color:grey"></i>',
                autoPrint: false,
                titleAttr: button_txt[2],
                exportOptions: {
                    columns: [1, 2, 3, 4, 5],
                    orthogonal: 'export'
                },
                customize: function( win ) {
                    $( win.document.body ).find( 'td.entry-name' ).css( 'text-align', 'center' );
                }
            } );

This works, but the content of the print pages did not have the right classes. I have used the developer tool from MS Edge.
This is the output

<tr>
<td class="p-5 text-right vertical-align-top entry-nr">ALMASY Katharina</td>
<td class="p-5 text-left vertical-align-top entry-name" style="text-align: left;">F</td>
<td class="p-5 text-center vertical-align-top entry-sex">2007</td>
<td class="p-5 text-center vertical-align-top entry-yob">100m BIFINS (18)01:30.9250m SURFACE (16)00:39.9350m BIFINS (8)00:39.8325m BIFINS (1)00:17.63100m SURFACE (5)01:28.3725m SURFACE (12)00:18.52</td>
<td class="p-5 text-center entry">A</td>
</tr>

You see that the classes are not correct as define. The first column should be entry-name and not entry-nr. Anyone an idea why this is?

Andreas

This question has accepted answers - jump to:

Answers

  • allanallan Posts: 47,496Questions: 1Answers: 6,751 Site admin
    Answer ✓

    Hi Andreas,

    What version of Buttons are you using here? There was a bug about this, so you'll probably need to use the nightly version.

    Allan

  • Andreas S.Andreas S. Posts: 113Questions: 35Answers: 2

    Hi Allan,

    I use Buttons 1.5.2
    Where can I download the nightly Version

    Andreas

  • colincolin Posts: 1,726Questions: 0Answers: 318
    Answer ✓

    Hi @Andreas S. ,

    You get it from here:

    https://nightly.datatables.net/buttons/js/dataTables.buttons.js
    

    Cheers,

    Colin

  • allanallan Posts: 47,496Questions: 1Answers: 6,751 Site admin
    Answer ✓

    The full list of nightly versions can be found here.

    Allan

Sign In or Register to comment.