Print button in dataTables

Hi,
I have a problem with showing print and pdf buttons in DataTables. I am using bootstrap admin template. I found on datatables webpage extensions for print and export but I didn't sure how to use that. If you can help me.
Žan AnđićAsked:
Who is Participating?
 
Leonidas DosasConnect With a Mentor Commented:
And to print the php var in the sheet:
<script>
    $(document).ready(function() {
        $('#dataTables-example').DataTable({
            responsive: true,
			"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
			dom: '<"toolbar">lfrtiBp',
            			
        buttons: [
            {
			extend:'print',
			exportOptions:{columns:[0,1,2]},
            customize: function ( win ) {
                    $(win.document.body)
                        .css( 'font-size', '10pt' )
                        .prepend(
                            '<b>Set here the php var that you want</b>'
                        );
 
                    $(win.document.body).find( 'table' )
                        .addClass( 'compact' )
                        .css( 'font-size', 'inherit' );
                }			 
			},			
            'excelHtml5',            
            'pdfHtml5'
        ]
        });
		$("div.toolbar").html('<b>Set here the php var that you want</b>');
    });
    </script>

Open in new window

1
 
Leonidas DosasCommented:
Load initially these scripts in the head section
Capture.JPGand then use this JQuery code:
$(document).ready(function() {
    $('#id_of_the_table').DataTable( {
        dom: 'Bfrtip',
        buttons: [
            'print'
        ]
    } );
} );

Open in new window

0
 
Žan AnđićAuthor Commented:
I try but not success,

I have these following lines
   <!-- jQuery -->
    <script src="../vendor/jquery/jquery.min.js"></script>
	<script src="../vendor/jquery/jquery.js"></script>
	
  <!-- DataTables JavaScript -->
    <script src="../vendor/datatables/js/jquery.dataTables.min.js"></script>
    <script src="../vendor/datatables-plugins/dataTables.bootstrap.min.js"></script>
    <script src="../vendor/datatables-responsive/dataTables.responsive.js"></script>

Open in new window

0
Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Leonidas DosasCommented:
Here we are.... Look at the scripts and links in the head and copy them with the series that they are.
<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
	<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
	<script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.js"></script>
	<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.js"></script>
	<link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
	<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css">
</head>
<body>
	<table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Name</th>
                <th>Position</th>
                <th>Office</th>
                <th>Age</th>
                <th>Start date</th>
                <th>Salary</th>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td>Tiger Nixon</td>
                <td>System Architect</td>
                <td>Edinburgh</td>
                <td>61</td>
                <td>2011/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Garrett Winters</td>
                <td>Accountant</td>
                <td>Tokyo</td>
                <td>63</td>
                <td>2011/07/25</td>
                <td>$170,750</td>
            </tr>
            <tr>
                <td>Ashton Cox</td>
                <td>Junior Technical Author</td>
                <td>San Francisco</td>
                <td>66</td>
                <td>2009/01/12</td>
                <td>$86,000</td>
            </tr>
			</tbody>
			</table>
			<script>
			$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',		
        buttons: [
            'print'
        ]
    } );
} );
			</script>
</body>
</html>

Open in new window

0
 
Žan AnđićAuthor Commented:
I tryed again but not success.
In new file with your code works, in my files not. Template is: SB Admin 2
I will try to explain situation with picture:
problem.jpg
0
 
NerdsOfTechTechnology ScientistCommented:
You could do it without jQuery as well.

Simple HTML 5 button with a link wrapped around it to trigger a javascript print command for example.

Just place it were you want the button.
<a href="javascript:window.print()"><button type="button">Print</button></a>

Open in new window

0
 
Leonidas DosasCommented:
Replace from lines 1125 -> 1147 the following scripts and links:
 <!-- DataTables JavaScript -->
    <script src="../vendor/datatables/js/jquery.dataTables.min.js"></script>
    <script src="../vendor/datatables-plugins/dataTables.bootstrap.min.js"></script>
    <script src="../vendor/datatables-responsive/dataTables.responsive.js"></script>
    <script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.js"></script>
	<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.js"></script>
	
	<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css">
    <!-- Custom Theme JavaScript -->
    <script src="../dist/js/sb-admin-2.js"></script>

    <!-- Page-Level Demo Scripts - Tables - Use for reference -->
    <script>
    $(document).ready(function() {
        $('#dataTables-example').DataTable({
            responsive: true,
			dom: 'Bfrtip',		
        buttons: [
            'print'
        ]
        });
    });
    </script>

Open in new window

Capture.JPG
With yellow markings are the new scripts and link that I have added and the table is presenting as I show at the image below:
Capture.JPG
0
 
Leonidas DosasCommented:
Apply the above changes as in the original code of the page without considering my previous posting (ID 42382139).
0
 
Žan AnđićAuthor Commented:
I try and now print button appear so that works, but not showing select of entries to display. Is there way to put print button on bottom of table? and how to insert export to pdf button?

Thank you very much for fast replies
0
 
Leonidas DosasCommented:
Change the position of string "B" at the dom property:
dom: 'frtiBp',

Open in new window

Capture.JPG
0
 
Žan AnđićAuthor Commented:
Thank youuu,

Working perfect, now print button is on bottom of table.

Now above missing "select number (entries) to show, 10,20..." is that posible to show?

And can I put just this to show pdf export?

<script>
    $(document).ready(function() {
        $('#dataTables-example').DataTable({
            responsive: true,
			dom: 'frtiBp',		
        buttons: [
            'print', 'excel', 'pdf'
        ]
        });
    });
    </script>

Open in new window

0
 
Leonidas DosasCommented:
Replace the lines that I post below (it requires jquery 1.10.6) and add string "l" at dom property:
<!-- DataTables JavaScript -->
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="../vendor/datatables-plugins/dataTables.bootstrap.min.js"></script>
    <script src="../vendor/datatables-responsive/dataTables.responsive.js"></script>
	
    <script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.js"></script>
	<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.js"></script>
	
	<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css">
    <!-- Custom Theme JavaScript -->
    <script src="../dist/js/sb-admin-2.js"></script>

    <!-- Page-Level Demo Scripts - Tables - Use for reference -->
    <script>
    $(document).ready(function() {
        $('#dataTables-example').DataTable({
            responsive: true,
			"lengthMenu": [ 10, 25, 50, 75, 100 ],
			dom: 'lfrtiBp',		
        buttons: [
            'print'
        ]
        });
    });
    </script>

Open in new window

0
 
Leonidas DosasCommented:
Alternative you can use 2d array as the follow script:
$(document).ready(function() {
        $('#dataTables-example').DataTable({
            responsive: true,
			"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
			dom: 'lfrtiBp',		
        buttons: [
            'print'
        ]
        });
    });

Open in new window

1
 
Žan AnđićAuthor Commented:
Thank youuu very much,

That works, now you can look here:

problem.jpg
0
 
Leonidas DosasCommented:
At exportoptions set the columns that you want to print:Replace the code
<!-- DataTables JavaScript -->
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
    <script src="../vendor/datatables-plugins/dataTables.bootstrap.min.js"></script>
    <script src="../vendor/datatables-responsive/dataTables.responsive.js"></script>
	
    <script src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.js"></script>
	<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.print.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/pdfmake.min.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.32/vfs_fonts.js"></script>
	<script src="https://cdn.datatables.net/buttons/1.4.2/js/buttons.html5.min.js"></script>
	
	<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css">
    <!-- Custom Theme JavaScript -->
    <script src="../dist/js/sb-admin-2.js"></script>

    <!-- Page-Level Demo Scripts - Tables - Use for reference -->
    <script>
    $(document).ready(function() {
        $('#dataTables-example').DataTable({
            responsive: true,
			"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
			dom: 'lfrtiBp',		
        buttons: [
            {
			extend:'print',
			 exportOptions:{columns:[0,1,2]} 
			},			
            'excelHtml5',            
            'pdfHtml5'
        ]
        });
    });
    </script>

Open in new window

0
 
Leonidas DosasCommented:
To display the php var:
 <script>
    $(document).ready(function() {
        $('#dataTables-example').DataTable({
            responsive: true,
			"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
			dom: '<"toolbar">lfrtiBp',
            			
        buttons: [
            {
			extend:'print',
			 exportOptions:{columns:[0,1,2]} 
			},			
            'excelHtml5',            
            'pdfHtml5'
        ]
        });
		$("div.toolbar").html('<b>Set here the php var that you want</b>');
    });
    </script>

Open in new window

0
 
Žan AnđićAuthor Commented:
I am so thankfull to you Leonidas Dosas. All works perfect. All showing very well, just lenghtMenu is above and there is empty space in row where is search, like on picture above. Is it possible to move down lenghtMenu, to be in the same row as a search bar.
0
 
Leonidas DosasConnect With a Mentor Commented:
In the head section add this css style property (it is referring to  #dataTables-example_length element that is the entries input)
     <style>
	#dataTables-example_length{
	float:left;
	}
	</style>

Open in new window

1
 
Žan AnđićAuthor Commented:
Work perfect! Thank you
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.