I am using Yajra Datatables to query a list of users server side. I added all the dependencies but the buttons are not showing. The buttons are copy, PDF, CSV and even custom buttons are showing. What I have tried is use different versions of JQuery but still nothing. When I just initialize the Datatable using an array of data coming from the view the buttons are showing and working fine but when I add the datasource as coming from a route and server side true the buttons are not showing. Anything am missing? Below is my code for server side processing which is not showing the buttons. I am also not getting console errors when I debug.
Datasource
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');
}
The table
<table id="example1" >
<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>
Below is my my CSS and JS libraries
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>
When I loop through the table like below using php or blade the buttons are showing:
<?php
if(isset($users) && count($users)>0){
?>
<table id="example1" >
<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 Initialization
<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>
CodePudding user response:
Try the code below. You are missing a DOM element of lBfrtip
<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>