I've searched and searched but just can't figure this out. I read in the documentation that you need to add initComplete to get the buttons to appear but I still have no luck.
Am I missing something? I've tried with and without dom, different ways of adding buttons, etc. I have no problem doing this without the ajax call, that works fine. There is something different here that I haven't figured out.
!doctype html>
<html lang="en" dir="ltr">
<head>
<title>Forensics Sample Database</title>
<meta charset="utf-8">
<meta name="viewport" content="width=1000, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Oxygen:400,700">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/dataTables.bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.12/css/buttons.bootstrap.min.css">
<link rel="stylesheet" href="./layout.css">
<script charset="utf-8" src="//ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script charset="utf-8" src="//cdn.datatables.net/1.10.12/js/jquery.dataTables.js"></script>
<script charset="utf-8" src="//cdn.datatables.net/1.10.12/js/dataTables.bootstrap.min.js"></script>
<script charset="utf-8" src="//cdn.datatables.net/buttons/1.2.2/js/buttons.bootstrap.min.js"></script>
<script charset="utf-8" src="//cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"</script>
<script charset="utf-8" src="//cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"</script>
<script charset="utf-8" src="//cdn.datatables.net/buttons/1.2.2/js/dataTables.buttons.min.js"</script>
<script charset="utf-8" src="//cdn.datatables.net/buttons/1.2.2/js/buttons.colVis.min.js"</script>
<script charset="utf-8" src="//cdn.datatables.net/buttons/1.2.2/js/buttons.print.min.js"</script>
<script charset="utf-8" src="//cdn.datatables.net/buttons/1.2.2/js/buttons.html5.min.js"</script>
<script charset="utf-8" src="//cdn.jsdelivr.net/jquery.validation/1.13.1/jquery.validate.min.js"></script>
<script charset="utf-8" src="webapp.js"></script>
</head>
and in my webapp.js file
$(document).ready(function(){
// On page load: datatable
var tablesamples = $('#tablesamples').DataTable({
"ajax": "data.php?job=get_samples",
"columns": [
{ "data": "sample_id" },
{ "data": "storage_location" },
{ "data": "depositor" },
{ "data": "sample_name", "sClass": "sample_name" },
{ "data": "date_received" },
{ "data": "supplier" },
{ "data": "source" },
{ "data": "concentration" },
{ "data": "volume" },
{ "data": "prep_exp" },
{ "data": "age" },
{ "data": "gender" },
{ "data": "ethnicity" },
{ "data": "draw_date" },
{ "data": "extraction_date" },
{ "data": "screened" },
{ "data": "collection_tube" },
{ "data": "matrix" },
{ "data": "notes" },
{"data": "functions", "sClass": "functions"}
],
"dom": '<"top"i>rt<"bottom"flp><"clear">',
// "dom": 'Blfrtp',
"scrollY": 400,
"scrollX": true,
buttons: [ 'excel '],
"initComplete": function(settings, json) {
alert( 'DataTables has finished its initialisation.' );
}
/* initComplete: function(){
var api = this.api();
new $.fn.dataTable.Buttons(api, {
buttons: [
{
'excel'
}
}
]
});
api.buttons().container().appendTo( 'tablesamples' + api.table().container().id + ' .col-sm-6:eq(0)' );
*/
});
table.buttons().container()
.appendTo( '#tablesamples_wrapper .col-sm-6:eq(0)');
enter code here
