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?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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
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
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

Ž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
Leonidas DosasCommented:
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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Ž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 DosasCommented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.