Anyone??
Jun 24, 2019
10
Level 1
Export Buttons won't display on Datatable
Hey all, I have a data table that uses ajax processing to display data. The information is being displayed but the export buttons are not showing. Can anyone assist me?
Page with data table (extending a master-page):
@extends('layouts.company')
@section('content')
<!-- Heading -->
<div class="card mb-3">
<div class="card-body d-sm-flex justify-content-between">
<h4 class="h4-responsive mb-2 mb-sm-0 pt-1">
<a href="{{route('admin.dashboard')}}">Home</a>
<span><i class="fa fa-angle-double-right mx-2" aria-hidden="true"></i></span>
<span>{{$title}}</span>
</h4>
</div>
</div>
@include('common.session_errors')
<div class="card mb-2">
<div class="card-body">
<div id="btn-place">yoo</div>
<table class="table table-bordered" width="100%" id="payments-table">
<thead>
<tr>
<th>Row-ID</th>
<th>Sub ID</th>
<th>Company Name</th>
<th>Amount($)</th>
<th>Status</th>
<th>Job Date (y-m-d)</th>
<th>Amount Paid ($)</th>
<th>Date Paid (y-m-d)</th>
<th>TRN/SS</th>
<th>Account Number</th>
<th>Bank</th>
<th>Branch</th>
</tr>
</thead>
</table>
</div>
</div>
@endsection
@push('scripts')
<script type="text/javascript">
$(document).ready(function(){
$('#payments-table').DataTable({
processing: true,
dom: 'lBfrtip',
serverSide: true,
ajax: '{{ route('get.payments') }}',
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'},
],
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
});
// make table scrollable on x-axis
$('#payments-table').wrap('<div class="dataTables_scroll" />');
</script>
@endpush
Master page with scripts:
<!-- 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://cdn.datatables.net/buttons/1.5.6/js/buttons.print.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://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.53/vfs_fonts.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://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.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://cdn.datatables.net/buttons/1.5.6/js/dataTables.buttons.min.js" type="text/javascript"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
What did i do wrong?
Please or to participate in this conversation.