Watch this video that will show you how to export your html table into excel, csv, pdf and more.
Include the libraries:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/buttons/1.6.4/css/buttons.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.4/js/dataTables.buttons.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.flash.min.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.53/pdfmake.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.html5.min.js"></script>
<script src="https://cdn.datatables.net/buttons/1.6.4/js/buttons.print.min.js"></script>
Zero configuration code:
<script type="text/javascript">
$(document).ready(function()
{
$('#example').DataTable(
{
dom: 'Blfrtip',
} );
} );
</script>
Custom configuration code:
<script type="text/javascript">
$(document).ready(function()
{
$('#example').DataTable(
{
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
dom: 'Blfrtip',
buttons: [
{
extend: 'excelHtml5',
title: 'Excel MK',
text:'Export to Excel'
},
{
extend: 'csvHtml5',
title: 'CSV MK',
text: 'Export to CSV'
},
{
extend: 'pdfHtml5',
title: 'PDF MK',
className: 'btn_pdf',
text: 'Export to PDF'
},
]
});
$('.btn_pdf').attr("class","btn btn-success");
} );
</script>