datatable print
HTML
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/s/bs/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.10,b-1.1.0,b-flash-1.1.0,b-html5-1.1.0,b-print-1.1.0,fh-3.1.0,sc-1.4.0/datatables.min.css">
<script src="https://cdn.datatables.net/s/bs/jszip-2.5.0,pdfmake-0.1.18,dt-1.10.10,b-1.1.0,b-flash-1.1.0,b-html5-1.1.0,b-print-1.1.0,fh-3.1.0,sc-1.4.0/datatables.min.js"></script>
<h1>Print test</h1>
<div class="data-table-container">
<table class="table table-hover table-striped table-bordered data-table">
<thead>
<tr>
<th class="text-right">No.</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr>
<td class="text-right">1</td>
<td>Name 1</td>
</tr>
<tr>
<td class="text-right">2</td>
<td>Name 2</td>
</tr>
</tbody>
</table>
</div>
CSS
.data-table-container {
padding: 10px;
}
.dt-buttons .btn {
margin-right: 3px;
}
JavaScript
$('table.data-table').DataTable({
paging: false,
columnDefs: [{
targets: 'no-sort',
orderable: false
}],
dom: '<"row"<"col-sm-6"Bl><"col-sm-6"f>>' +
'<"row"<"col-sm-12"<"table-responsive"tr>>>' +
'<"row"<"col-sm-5"i><"col-sm-7"p>>',
fixedHeader: {
header: true
},
buttons: {
buttons: [{
extend: 'print',
text: '<i class="fa fa-print"></i> Print',
title: $('h1').text(),
exportOptions: {
columns: ':not(.no-print)'
},
autoPrint: false
}, {
extend: 'excel',
text: '<i class="fa fa-file-excel-o"></i> Excel',
title: $('h1').text(),
exportOptions: {
columns: ':not(.no-print)'
}
}, {
extend: 'pdf',
text: '<i class="fa fa-file-pdf-o"></i> PDF',
title: $('h1').text(),
exportOptions: {
columns: ':not(.no-print)'
}
}],
dom: {
container: {
className: 'dt-buttons'
},
button: {
className: 'btn btn-default'
}
}
}
});