Issue
I utilized dataTable.view to show particular data in my Django app and I'd like to show buttons such as csv and excel.
I add buttons in options but when I want to construct them (according to the document), this error: $.fn.dataTable.Buttons is not a constructor appears.
I also added buttons.dataTables.min.js , buttons.html5.min.js, buttons.foundation.min.js in the UI.
var options = {
.....
buttons: [
'excel', 'csv'
],
sDom: 'Bfrtip'
}//end of defaultDataTableOptions
var datatable = datatableview.initialize($('.datatable'), options);
var table = $('#DataTables_Table_0').DataTable();
new $.fn.dataTable.Buttons( table, {
buttons: [
'copy', 'excel'
]
} );
table.buttons().container().appendTo( $('#buttons', table.table().container() ) );
$.fn.dataTable.Buttons is not a constructor
Solution
I also wasn't able to show export buttons using $.fn.dataTable..
But I was able to find another solution to show export buttons:
$(document).ready(function() {
$('#exampleTable').DataTable( {
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
} );
} );
This will show the following:
Used cdn's:
<link href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/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/2.4.2/js/buttons.html5.min.js"></script>
Full tested file:
<!DOCTYPE html>
<html>
<head>
<link href="https://cdn.datatables.net/1.13.7/css/jquery.dataTables.min.css" rel="stylesheet">
<link href="https://cdn.datatables.net/buttons/2.4.2/css/buttons.dataTables.min.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-3.7.0.js"></script>
<script src="https://cdn.datatables.net/1.13.7/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/buttons/2.4.2/js/dataTables.buttons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/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/2.4.2/js/buttons.html5.min.js"></script>
</head>
<body>
<table id="exampleTable" class="display" style="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>
<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() {
$('#exampleTable').DataTable( {
dom: 'Bfrtip',
buttons: [
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5'
]
} );
} );
</script>
</body>
</html>(As Stack Overflow isn't able to let users use a download button, these export buttons will not work in the snippet.)
--EDIT (after @NASRIN's comment):
To export all table data, you would need to add a "all" or "show all" button, so instead of 10-per-page, as you normally would, you would show all table data on the same page, and export. This is because the export will only download the currently shown table data.
See example:
You can do this by using the following:
lengthMenu: [
[10, 25, 50, -1],
[10, 25, 50, 'All']
]
Source: https://datatables.net/examples/advanced_init/length_menu
More information can be found on this question.
Answered By - Tim-Bolhoeve
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.