Use export buttons on DataTable - laravel

Question

I have a DataTable that has server-side processing using Ajax. I am trying to add export buttons to it, but I haven't been successful. I am extending a Laravel view that has all the files in it already, but I am unable to get the buttons to show.
Master page with necessary files:
<!-- Datatable -->
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js" type="text/javascript"> </script>
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link href="https://cdn.datatables.net/buttons/1.5.6/css/buttons.dataTables.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.js" type="text/javascript"> </script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/pdfmake.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.html5.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/select/1.3.0/js/dataTables.select.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/buttons/1.5.6/js/buttons.flash.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js" type="text/javascript"></script>
Page with DataTable:
<script type="text/javascript">
$(document).ready(function(){
$('#payments-table').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
processing: true,
serverSide: true,
ajax: '{{ route('get.payments') }}',
order:[ [5,'desc'] ],
columns: [
{ data: 'id', name: 'id' },
{ data: 'sub_id', name: 'sub_id' },
{ data: 'company_name', name: 'company_name'},
{ data: 'amount', name: 'amount'},
{ data: 'status', name: 'status'},
{ data: 'job_date', name: 'job_date'},
{ data: 'amount_payed', name: 'amount_payed'},
{ data: 'date_payed', name: 'date_payed'},
{ data: 'trn_ss', name: 'trn_ss'},
{ data: 'account_number', name: 'account_number'},
{ data: 'bank_name', name: 'bank_name'},
{ data: 'bank_branch', name: 'bank_branch'},
]
});
});
The DataTable displays correctly, but the buttons don't display, and I don't know what it could be.

Answer 1

Have you tried to manually put the buttons in?
var table = $('#payments-table').DataTable({...
$('#div_to_place_buttons_in').html(table.buttons().container());
From my experience with DataTables you won't need the dom: 'Bfrtip' if you manually move the buttons container to a different place.
For your comment just change your DataTables instantiation to be held in a variable called table and remove the dom part, and then you will have access to the instance of DataTables in the table variable. See below:
var table = $('#payments-table').DataTable({
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
],
processing: true,
serverSide: true,
ajax: '{{ route('get.payments') }}',
order:[ [5,'desc'] ],
columns: [
{ data: 'id', name: 'id' },
{ data: 'sub_id', name: 'sub_id' },
{ data: 'company_name', name: 'company_name'},
{ data: 'amount', name: 'amount'},
{ data: 'status', name: 'status'},
{ data: 'job_date', name: 'job_date'},
{ data: 'amount_payed', name: 'amount_payed'},
{ data: 'date_payed', name: 'date_payed'},
{ data: 'trn_ss', name: 'trn_ss'},
{ data: 'account_number', name: 'account_number'},
{ data: 'bank_name', name: 'bank_name'},
{ data: 'bank_branch', name: 'bank_branch'},
]
});
$('#div_to_place_buttons_in').html(table.buttons().container());
I'm not sure what your HTML looks like, but you just need a div/similar container to place the buttons in and reference it instead of div_to_place_buttons_in.