Existe-t-il un autre moyen d'afficher le bouton d'exportation dans la table de données Yajra à l'aide de Laravel 5.8 ?

Question

J'utilise Yajra Datatables pour interroger une liste d'utilisateurs côté serveur. J'ai ajouté toutes les dépendances mais le bouton ne s'affiche pas. Les boutons sont Copier, PDF, CSV et affichent même des boutons personnalisés. J'ai essayé d'utiliser différentes versions de JQuery mais toujours rien. Lorsque je viens d'initialiser la table de données avec le tableau de données de la vue, les boutons s'affichent et fonctionnent correctement, mais lorsque j'ajoute la source de données du côté route et serveur, les boutons n'apparaissent pas. Il manque quelque chose ? Ci-dessous se trouve mon code de traitement côté serveur, le bouton n'est pas affiché. Je ne reçois pas non plus d'erreurs de console lors du débogage.

Source de données

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');
}

Formulaire

<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>

Voici mes bibliothèques CSS et JS

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>

Lorsque je parcourt le tableau en utilisant php ou blade, les boutons s'affichent :

<?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";
                                  }
                    ?>

Initialisation de la table

<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

Essayez le code ci-dessous. Il vous manque un élément DOM pour lBfrtip

sssccc