Tuesday, July 17, 2018

How to add title and image header to all pages while printing using DataTable

Step 1

Download below JS file and replace your print.button.js with below it,https://github.com/aravindnc/Buttons/blob/repeating-print-head/js/buttons.print.js

Step 2

Add new option repeatingHead inside the button settings.
Below are the options for repeatingHead,
{
    logo: 'Your logo URL to be repeated',
    logoPosition: 'right', // left, center, right
    logoStyle: '', // any css eg: padding:10px;
    title: '

Sample Heading

'
// your heading }
A sample is given below.
<script>
    $(document).ready(function() {
        // DataTable initialisation
        $('#example').DataTable({
            "dom": 'Bfrtip',
            "paging": true,
            "autoWidth": true,
            "columnDefs": [{
                "visible": true,
                "targets": -1
            }],
            buttons: [{
                extend: 'print',
                autoPrint: true,
                title: '',

                //For repeating heading.
                repeatingHead: {
                    logo: 'https://www.google.co.in/logos/doodles/2018/world-cup-2018-day-22-5384495837478912-s.png',
                    logoPosition: 'right',
                    logoStyle: '',
                    title: '

Sample Heading

'
} }] }); }); </script>

Step 3

If you want to remove the borders around logo, add a new class dt-print-table to your table and add below style to your css file.
@media print
{
html, body { height: auto; }
.dt-print-table, .dt-print-table thead, .dt-print-table th, .dt-print-table tr {border: 0 none !important;}
}
Thats all :)

Popular Posts