Tengo una tabla:
<table id="productos" class="table table-striped table-bordered shadow-lg nt-4 display responsive nowrap" style="width:100%">
<thead>
<tr>
<th scope="col">ID</th>
<th scope="col">Imagen</th>
<th scope="col">Código</th>
<th scope="col">Categoría</th>
<th scope="col">Descripción</th>
<th scope="col">Stock</th>
<th scope="col">Solicitado</th>
<th scope="col">Acciones</th>
</tr>
</thead>
<tbody>
@foreach ($productos as $producto)
<tr>
<td>{{$producto->id}}</td>
<td>
<img src="/imagen/{{$producto->imagen}}" style="height: 50px; width: 50px; border-radius: 20%;">
</td>
<td>{{$producto->codigo}}</td>
<td>{{$producto->categorias->categoria}}</td>
<td>{{$producto->descripcion}}</td>
<td>{{$producto->cantidad}}</td>
<td>{{$producto->solicitudes}}</td>
<td>
<div class="flex justify-center rounded-lg text-lg" role="group">
<a href="/productos/{{ $producto->id}}/edit" class="rounded bg-blue-500 hover:bg-blue-600 text-white py-1 px-2">Editar</a>
<form action="{{ route('productos.destroy', $producto->id) }}" method="POST" class="formEliminar">
@csrf
@method('DELETE')
<button type="submit" class="rounded bg-red-400 hover:bg-red-500 text-white py-1 px-2">Borrar</button>
</form>
</div>
</td>
</tr>
@endforeach
</tbody>
</table>
a la que le quiero agregar botones para exportar a excel, pdf, etc., y mientras que con el código de la siguiente forma me aparecen los botones:
$(document).ready(function() {
$('#productos').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf'
],
language: {
"lengthMenu": "Mostrar _MENU_ registros",
"zeroRecords": "No se encontraron resultados",
"info": "Mostrando registros del _START_ al _END_ de un total de _TOTAL_ registros",
"infoEmpty": "Mostrando registros del 0 al 0 de un total de 0 registros",
"infoFiltered": "(filtrado de un total de _MAX_ registros)",
"sSearch": "Buscar:",
"oPaginate": {
"sFirst": "Primero",
"sLast": "Último",
"sNext": "Siguiente",
"sPrevious": "Anterior"
},
"sProcessing": "Procesando...",
},
});
});
Cuando quiero utilizar
exportOptions: {
columns: [1,3,4,5,6,7]
}
Para modificar el formato de impresión. los botones desaparecen, al igual que cuando escribo la parte de 'buttons
' de otra forma.
Esto es lo que tengo referenciado en la página:
@section('css')
<link rel="stylesheet" href="/css/admin_custom.css">
<link href="https://cdn.datatables.net/1.12.1/css/dataTables.bootstrap5.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css"> <script type="text/javascript" language="javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
@stop
@section('js')
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.flash.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
@stop