0

Estoy realizando un proyecto utilizando Datatables ahora quiero volver mi tabla responsive auctalmente mi tabla no cuenta con boostrap ya que la he desarrollado de forma manual ya el resto de la datatable esta funcionando de manera correcta y he seguido los datos señalados en la guía oficial de Datatable pero no he podido cuadrarlo aun y la verdad ya lo he intentado bastante y aun no he tenido ninguna clase de resultados a continuación mi código:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
  <script src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
  <link rel="stylesheet" href="//cdn.datatables.net/responsive/2.2.9/css/responsive.bulma.min.css">
  <script src="//cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script>
<table class="datatable display responsive nowrap" cellspacing="0" id="tabl_product">
        <thead>
          <tr>
            <th>Categoria producto</th>
            <th>Nombre del producto</th>
            <th>Descripción del producto</th>
            <th>Cantidad</th>
            <th>Valor</th>
            <th>Imagen</th>
            <th>ACCIONES</th>
          </tr>
        </thead>
        <tbody id="producto">
          <?php
          $resultado = $query->fetchAll(PDO::FETCH_ASSOC);

          foreach ($resultado as $row) { ?>
            <tr>
              <td><?php echo $row["NOMBRE_CATEGORIA_PRODUCTO"] ?></td>
              <td><?php echo $row["NOMBRE_PRODUCTO"] ?></td>
              <td><?php echo $row["DESCRIPCION_PRODUCTO"] ?></td>
              <td><?php echo $row["CANTIDAD_PRODUCTO"] ?></td>
              <td><?php echo $row["VALOR_PRODUCTO"] ?></td>
              <td class="imagen_vista"><?php echo '<img src="'. $row["IMAGEN_PRODUCTO"] . '" style="width:300px;height:250px;border-radius:10px;background:none;">'?><td>
                <!-- Actualizar registro -->
                <a href="<?php echo constant('URL'); ?>admin/actualizar_producto?ID_PRODUCTO=<?php echo $row["ID_PRODUCTO"] ?>"><button class="abrirPopup-edit btn-edit" type="button" >Editar</button></a>
                <!-- Eliminar registro -->
                <a href="<?php echo constant('URL'); ?>app/models/admin/productos/eliminar_producto.php?ID_PRODUCTO=<?php echo $row["ID_PRODUCTO"] ?>" class="obtener_eliminar"><button class="abrirPopup-edit btn-delete" type="button">Eliminar</button></a>
            </tr>
          <?php
          }
          ?>
        </tbody>
      </table>
<script>
    $(document).ready( function () {
   $('#tabl_product').DataTable({
        "language": {
            "url": "//cdn.datatables.net/plug-ins/1.10.16/i18n/Spanish.json"
        },
      responsive: true,
      dom: 'Bfrtip',
        buttons: [
          {
            extend: 'excelHtml5',
            text: 'Exportar a excel',
            className: 'button_excel',
            color: 'red'
          },
          {
      extend: 'pdfHtml5',
            text: 'Exportar a pdf',
            className: 'button_pdf'           
          },
        ],
         "columnDefs": [{
        "targets": 0
         }],
    });
} );
  </script>
1

1 respuesta 1

0

Puedas volverla responsive colocándola dentro de un div y que este tenga la propiedad overflow-x, que especifica si el contenido debe estar oculto, visible o se desplaza horizontalmente cuando el contenido desborda los bordes izquierdo y derecho del elemento.

<div style="overflow-x:auto;">
  <table id="tabl_product">
     ...
  </table>
</div>
1
  • Ya trate la solución sugerida pero todos los estilos se deformarón y aun no es responsive Commented el 13 ago. 2021 a las 23: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.