Gibt es eine andere Möglichkeit, die Exportschaltfläche in der Yajra-Datentabelle mit Laravel 5.8 anzuzeigen?

Question

Ich verwende Yajra Datatables, um eine Liste von Benutzern auf der Serverseite abzufragen. Ich habe alle Abhängigkeiten hinzugefügt, aber die Schaltfläche wird nicht angezeigt. Die Schaltflächen sind Kopieren, PDF, CSV und sogar benutzerdefinierte Anzeigeschaltflächen. Ich habe versucht, verschiedene Versionen von JQuery zu verwenden, aber immer noch nichts. Wenn ich die Datentabelle einfach mit dem Datenarray aus der Ansicht initialisiere, werden die Schaltflächen angezeigt und funktionieren einwandfrei. Wenn ich jedoch die Datenquelle von der Routen- und Serverseite aus hinzufüge, werden die Schaltflächen nicht angezeigt. Fehlt etwas? Unten ist mein serverseitiger Verarbeitungscode, die Schaltfläche wird nicht angezeigt. Beim Debuggen erhalte ich auch keine Konsolenfehler.

Datenquelle

public function index(Request $request)


    if ($request->ajax()) {

    $users = User::select(
        "users.id", 
        "users.first_name",
        "users.last_name",
        "users.email",
        "users.created_at",
        "roles.name as role_name")
        ->join("roles", "roles.id", "=", "users.role_id")
        ->where("users.status", "=", 1)
        ->get();

        return Datatables::of($users)
                ->addIndexColumn()
                ->make(true);
    }

        return view('users/index');
}

Formular

<table id="example1" class="table table-bordered table-striped">
                              <thead>
                                <tr>
                                  <th>Email</th>
                                  <th>First Name</th>
                                  <th>Last Name</th>
                                  <th>Date Added</th>
                                </tr>
                              </thead>
                              <tbody>

                              </tbody>
                            </table>

<script>
  $(function () {
$("#example1").DataTable({
    processing: true,
    serverSide: true,
    ajax: {
            url: '{{ route('users.home') }}',
        },
    columns: [
        {data: 'email', name: 'email'},
        {data: 'first_name', name: 'first_name'},
        {data: 'last_name', name: 'last_name'},
        {
            data: "created_at",
            "render": function (value) {
                if (value === null) return "";
                return moment(value).format('DD/MM/YYYY');
            }
        }
    ],
  "responsive": false, "lengthChange": false, "autoWidth": false,
  "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
}).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');
  });
</script>

Hier sind meine CSS- und JS-Bibliotheken

CSS

<link rel="stylesheet" href="{{ asset('plugins/datatables-bs4/css/dataTables.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/datatables-responsive/css/responsive.bootstrap4.min.css') }}">
<link rel="stylesheet" href="{{ asset('plugins/datatables-buttons/css/buttons.bootstrap4.min.css') }}">

JS

<script src="{{ asset('plugins/datatables/jquery.dataTables.min.js') }}"></script>
<script src="{{ asset('plugins/datatables-buttons/js/dataTables.buttons.min.js') }}"></script>
<script src="{{ asset('plugins/jszip/jszip.min.js') }}"></script>
<script src="{{ asset('plugins/pdfmake/pdfmake.min.js') }}"></script>
<script src="{{ asset('plugins/pdfmake/vfs_fonts.js') }}"></script>
<script src="{{ asset('plugins/datatables-buttons/js/buttons.html5.min.js') }}"></script>

Wenn ich mit PHP oder Blade durch die Tabelle blättere, werden die Schaltflächen angezeigt:

<?php
                    if(isset($users) && count($users)>0){ 
                      ?>
                            <table id="example1" class="table table-bordered table-striped">
                              <thead>
                                <tr>
                                  <th>Email</th>
                                  <th>First Name</th>
                                  <th>Last Name</th>
                                </tr>
                              </thead>
                              <tbody>
                      <?php

                      foreach($users as $user){ 
                      ?>
                                <tr>
                                  <td><?php echo $user['email']; ?></td>
                                  <td><?php echo $user['first_name']; ?></td>
                                  <td><?php echo $user['last_name']; ?></td>
                                </tr>




                      <?php
                        
                      } ?>

                              </tbody>
                            </table>
                            <?php
                                  }else {
                                    echo "No Users Available";
                                  }
                    ?>

Tabelleninitialisierung

<script>
    $("#example1").DataTable({
  "responsive": true, "lengthChange": false, "autoWidth": false,
  "buttons": ["copy", "csv", "excel", "pdf", "print", "colvis"]
}).buttons().container().appendTo('#example1_wrapper .col-md-6:eq(0)');


});
</script>

Answer 1

尝试下面的代码。您缺少 lBfrtip 的 DOM 元素