我正在使用 Yajra Datatables 查詢伺服器端的使用者清單。我新增了所有依賴項,但按鈕未顯示。按鈕是複製、PDF、CSV,甚至顯示自訂按鈕。我嘗試過使用不同版本的 JQuery 但仍然沒有任何結果。當我剛剛使用來自視圖的資料數組初始化資料表時,按鈕顯示並且工作正常,但是當我添加來自路由和伺服器端的資料來源時,按鈕不顯示。有什麼東西不見了嗎?下面是我的伺服器端處理程式碼,未顯示按鈕。我在調試時也沒有收到控制台錯誤。
資料來源
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 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 循環瀏覽表格時,按鈕會顯示:
<?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"; } ?>
表格初始化
<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>