是否有另一种方法可以使用 laravel 5.8 在 Yajra 数据表中显示导出按钮？

Question

我正在使用 Yajra Datatables 来查询服务器端的用户列表。我添加了所有依赖项，但按钮没有显示。按钮是副本、PDF、CSV，甚至显示自定义按钮。我尝试过使用不同版本的 JQuery 但仍然没有。当我使用来自视图的数据数组初始化 Datatable 时，按钮正在显示并且工作正常但是当我添加来自路由和服务器端的数据源时，按钮没有显示。有什么遗漏吗？下面是我的服务器端处理代码，没有显示按钮。我在调试时也没有收到控制台错误。

数据源

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

table

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

下面是我的 CSS 和 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>

当我使用 php 或 blade 循环遍历 table 时，按钮显示：

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

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

试试下面的代码。您缺少 lBfrtip

的 DOM 元素

<script>


$(function () {
$("#example1").DataTable({
    processing: true,
    serverSide: true,
    dom:'lBfrtip',
    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>

是否有另一种方法可以使用 laravel 5.8 在 Yajra 数据表中显示导出按钮？

Is there another way to show Export buttons in Yajra Datatables using laravel 5.8?

html

php

yajra-datatable

laravel-5.8