Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

Kish77's avatar

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?

0 likes
10 replies
zahidnazirkhan's avatar

You should try using dom attribute like this:

"dom": 'Bfrtip'

Also you should place the general file

dataTables.buttons.min.js

on top of other separate button js files.

Give it a try.

Kish77's avatar

I updated my code to this but when I check console for erros it tells me table.buttons is not a function?

     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'},
          ]

         // table.buttons
        });
        $('#btn-place').html(table.buttons().container()); 

Please or to participate in this conversation.