CODEWITHSUNDEEP
cssdatatables
apripuppey
apripuppey

Reputation: 111

Datatables - Change Font Size of Printed Page Title

I have a problem when attempting to change my printed page title's font. I've used the customize method based on this documentation

and here's my code:

$(document).ready(function() {
$('#tabelservis').DataTable( {
    "columnDefs": [
            { "type": "numeric-comma", targets: [0, 3] }
    ],
    dom: 'Bfrtip',
    buttons: [
        {
            extend: 'copyHtml5',
            exportOptions: {
                columns: [ 0, ':visible' ]
            }
        },
        {
            extend: 'excel',
            exportOptions: {
                columns: [ 0,1, 2, 3, 4 ]
            }
        },
        {
            extend: 'print',
            title: 'All of Services',
            exportOptions: {
                columns: [ 0,1, 2, 3, 4 ]
            },
            customize: function ( win ) {
                $(win.document.body)
                    .css( 'font-size', '12px' );

                $(win.document.body).find( 'table' )
                    .css( 'font-size', '12px' );
            }

        }
    ]
} );
} );

But still the title font is not changing, here's the screenshot:

enter image description here

As you can see, the big "All of services" still has big font size.

Any suggestions to solve this? Thank you

Upvotes: 4

Views: 10416

Answers (3)

Brudka
Brudka

Reputation: 96

The title is on <h1> html markers. So You can change all css style for this marker.

For example:

 customize: function ( doc ) {
     $(doc.document.body).find('h1').css('font-size', '15pt');
     $(doc.document.body).find('h1').css('text-align', 'center'); 
 }

Etc. ;)

Upvotes: 8

Grebe.123
Grebe.123

Reputation: 107

Try wrapping your title in a div with style setting the font size:-

buttons [
 extend: 'print',
 title: function() {
    return "<div style='font-size: 14px;'>My Title</div>";
  } 

]

Upvotes: 3

Ferdous Azad
Ferdous Azad

Reputation: 13

You can try like this for now

$(win.document.body:contains("All of services")).css( 'font-size', '12px' );

Upvotes: 0

Related Questions