Call Print from a custom button

kevino4076

Hi all,
Is it possible to call the print function from a custom button? We have (like most) our own UI and buttons/actions on the page and would like to tie one of them to the print action. Can't figure out how to do this.

thanks

BoltBait

Try like this:

<button onclick='window.print();'>print</button>

jLinux

The code from @BoltBait would print the entire window, so its probably not what you want..

My question is... why do you want to create another button, just to trigger the click on a button?

I was in a situation where I wanted to highly customize the button, so what I did was just use the API to do it.

If you look at this screenshot, and this one, you can see that the "tool box" I created has the copy, csv, pdf,-button print, excel, selectAll, selectNone and even a -collection with the columnsToggle in it, as well as some custom buttons..

You can basically just style the buttons as you want by adding CSS classes with className, then move the buttons where you want using table.buttons( 0, null ).container().appendTo( '#some-container' );

It works perfectly fine..

Heres my exact code:

var dt = $('#data-table' ).DataTable();


// Name of the filename when exported (except for extension)
var export_filename = 'Filename-' + tools.date( '%d-%M-%Y' );

// Configure Export Buttons
new $.fn.dataTable.Buttons( dt, {
    buttons: [
        {
            text: '<i class="fa fa-lg fa-clipboard"></i>',
            extend: 'copy',
            className: 'btn btn-xs btn-primary p-5 m-0 width-35 assets-export-btn export-copy ttip'
        }, {
            text: '<i class="fa fa-lg fa-file-text-o"></i>',
            extend: 'csv',
            className: 'btn btn-xs btn-primary p-5 m-0 width-35 assets-export-btn export-csv ttip',
            title: export_filename,
            extension: '.csv'
        }, {
            text: '<i class="fa fa-lg fa-file-excel-o"></i>',
            extend: 'excel',
            className: 'btn btn-xs btn-primary p-5 m-0 width-35 assets-export-btn export-xls ttip',
            title: export_filename,
            extension: '.xls'
        }, {
            text: '<i class="fa fa-lg fa-file-pdf-o"></i>',
            extend: 'pdf',
            className: 'btn btn-xs btn-primary p-5 m-0 width-35 assets-export-btn export-pdf ttip',
            title: export_filename,
            extension: '.pdf'
        }
    ]
} );

// Add the Export buttons to the toolbox
dt.buttons( 0, null ).container().appendTo( '#export-assets' );


// Configure Print Button
new $.fn.dataTable.Buttons( dt, {
    buttons: [
        {
            text: '<i class="fa fa-lg fa-print"></i> Print Assets',
            extend: 'print',
            className: 'btn btn-primary btn-sm m-5 width-140 assets-select-btn export-print'
        }
    ]
} );

// Add the Print button to the toolbox
dt.buttons( 1, null ).container().appendTo( '#print-assets' );


// Select Buttons
new $.fn.dataTable.Buttons( dt, {
    buttons: [
        {
            extend: 'selectAll',
            className: 'btn btn-xs btn-primary p-5 m-0 width-70 assets-select-btn'
        }, {
            extend: 'selectNone',
            className: 'btn btn-xs btn-primary p-5 m-0 width-70 assets-select-btn'
        }
    ]
} );

// Add the Select buttons to the toolbox
dt.buttons( 2, null ).container().appendTo( '#select-assets' );


// Configure Selected Assets Buttons (delete, timeline, etc)
new $.fn.dataTable.Buttons( dt, {
    buttons: [
        {
            text: 'Delete Selected',
            action: function () {
                assets.delete_from_list(dt, assets.selected_ids( dt ) );
            },
            className: 'btn btn-primary btn-sm m-5 width-140 assets-select-btn toolbox-delete-selected'
        }, {
            text: 'View Timeline',
            action: function () {
                console.log(assets.selected_ids( dt ));
            },
            className: 'btn btn-primary btn-sm m-5 width-140 assets-select-btn'
        }
    ]
} );

// Add the selected assets buttons to the toolbox
dt.buttons( 3, null ).container().appendTo( '#selected-assets-btn-group' );


// Configure Select Columns
new $.fn.dataTable.Buttons( dt, {
    buttons: [
        {
            extend: 'collection',
            text: 'Select Columns',
            buttons: [ {
                extend: 'columnsToggle',
                columns: ':not([data-visible="false"])'
            } ],
            className: 'btn btn-primary btn-sm m-5 width-140 assets-select-btn'
        }
    ],
    fade: true
} );

// Add the select columns button to the toolbox
dt.buttons( 4, null ).container().appendTo( '#toolbox-column-visibility' );

Alternatively, you could do something super cheesy, like create the print button, and add a class name (EG: print-button) using className, then use CSS to hide that button, and create another button that will $('button.print-button').trigger('click'), but thats super cheesy.. especially since you can accomplish just about everything just using the awesome DT API!

kevino4076

JLinux,
That's perfect. Great bit of code and EXACTLY what I was looking for (we use bootstrap also so even better).

thanks

jLinux

Awesome! :) Glad I could help.

Whenever I try to find a "work around" for something in DT, I usually just try to realize that I probably am not the first person to run into that issue, and @allan has thought of most everything, so theres probably a very reasonable solution