0

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   
0

1 respuesta 1

2

No nos estás mostrando como implementas tu exportOptions, sin embargo, yo anteriormente lo implementé en un proyecto. Te dejo un ejemplo de como deberías implementarlo en tu código:

<script>
$(document).ready(function() {
  $('#productos').DataTable({
    dom: 'Bfrtip',
    buttons: [
      {
        extend: "copy", 
        text: "Copiar"
      },

      {
        extend: "csv", 
        text: "CSV",
        title: 'Titulo de tu CSV'
      },

      {
        extend: "excel", 
        text: "Excel",
        title: 'Titulo de tu excel'
      },

      {
        extend: "pdf", 
        text: "PDF",
        title: 'Titulo de tu PDF',

        //COLUMNAS QUE SE VAN A EXPORTAR AL PDF
        exportOptions: {
          columns: '1,3,4,5,6,7'
        }
    }],

    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...",
    },  
      
  });
});
</script>

Como podrás ver, cada botón ahora pasa a tener propiedades individuales. Incluso podrías personalizarlo mas. observa que dentro de extend: "pdf" estamos implementando exportOptions

Espero que te sirva

1
  • 1
    Lo estaba colocando luego del buttons, y por alguno razón eso hacía que todo el sistema de DataTables no me apareciera en la página, al igual que escribir el código de otra forma que no fuera la que tenía en la pregunta. El tuyo sirvió, ya pude modificar eso. Commented el 19 jul. 2022 a las 15:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.