1

El problema que tengo es que al hacerle responsive a la tabla esta se daña, no se porque pasa sabiendo que tiene un width:"100%" y tiene ambos scroll

Como esta inicialmente:

introducir la descripción de la imagen aquí

Como se ve en el responsive: introducir la descripción de la imagen aquí

Esto se arregla cuando uno mueve algo pero quisiera que se arreglara, Como se debiera ver: introducir la descripción de la imagen aquí

var table = $('#tblComprasRango').DataTable({
  scrollY:200,
  scrollX:true,
  scroller:{
    loadingIndicator: true
  },
  dom: 'frtipB',
  buttons: [
    'copy', 'csv', 'excel', 'pdf'
  ],
  language: {
    "emptyTable": "No hay información",
    "info": "Mostrando _START_ a _END_ de _TOTAL_ Documentos",
    "infoEmpty": "Mostrando 0 to 0 of 0 Documentos",
    "infoFiltered": "(Filtrado de _MAX_ total entradas)",
    "infoPostFix": "",
    "thousands": ",",
    "lengthMenu": "Mostrar _MENU_ Documentos",
    "loadingRecords": "Cargando...",
    "processing": "Procesando...",
    "search": "Buscar:",
    "zeroRecords": "Sin resultados encontrados",
    "paginate": {
      "first": "Primero",
      "last": "Ultimo",
      "next": "Siguiente",
      "previous": "Anterior"
    }
  }
});
<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>
<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>

<div class="comprasRango" class="tab-pane fade">
  <table id="tblComprasRango" class="table table-striped table-border table-condensed table-holver" cellspacing="0" width="100%">
    <thead>
      <tr>
        <th>Nombre</th>
        <th>Boleta</th>
        <th>Total&nbsp;Compras</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>EJE CAF.PEREIRA</td>
        <td>1</td>   
        <td>775,731,615.04</td>
      </tr>
      <tr>
        <td>ZONA SUR (VALLE/CAUCA/NARIÑO)</td>
        <td>2</td>
        <td>503,927,312.80</td>
      </tr>
      <tr>
        <td>HUILA Y CAQUETA</td>
        <td>3</td>
        <td>239,755,868.94</td>
      </tr>
      <tr>
        <td>TOLIMA</td>
        <td>4</td>
        <td>58,224,961.73</td>
      </tr>
      <tr>
        <td>FUSA,MELGAR,GIRARDOT.</td>
        <td>5</td>       
        <td>10,817,773.14</td>
      </tr>
      <tr>
        <td>RICAURTE BOGOTA</td>
        <td>6</td>
        <td>3,879,908.19</td>
      </tr>
      <tr>
        <td>DECORARCO CALI</td>
        <td>7</td>
        <td>03</td>
        <td>2,712,981.42</td>
      </tr>
      <tr>
        <td>8</td>
        <td></td>
        <td>1,128,287.50</td>
      </tr>
      <tr>
        <td>COSTA ATLANTICA</td>
        <td>9</td>
        <td>758,934.95</td>
      </tr>
      <tr>
        <td>ANTIOQUIA</td>
        <td>10</td>
        <td>0.30</td>
      </tr>
      <tr>
        <td>EJE CAF.PEREIRA</td>
        <td>11</td>
        <td>775,731,615.04</td>
      </tr>
      <tr>
        <td>ZONA SUR (VALLE/CAUCA/NARIÑO)</td>
        <td>12</td>
        <td>503,927,312.80</td>
      </tr>
      <tr>
        <td>HUILA Y CAQUETA</td>
        <td>13</td>
        <td>239,755,868.94</td>
      </tr>
      <tr>
        <td>TOLIMA</td>
        <td>14</td>
        <td>58,224,961.73</td>
      </tr>
      <tr>
        <td>FUSA,MELGAR,GIRARDOT.</td>
        <td>15</td>        
        <td>10,817,773.14</td>
      </tr>
      <tr>
        <td>RICAURTE BOGOTA</td>
        <td>16</td>
        <td>3,879,908.19</td>
      </tr>
      <tr>
        <td>EJE CAF.PEREIRA</td>
        <td>1</td>   
        <td>775,731,615.04</td>
      </tr>
      <tr>
        <td>ZONA SUR (VALLE/CAUCA/NARIÑO)</td>
        <td>2</td>
        <td>503,927,312.80</td>
      </tr>
      <tr>
        <td>HUILA Y CAQUETA</td>
        <td>3</td>
        <td>239,755,868.94</td>
      </tr>
      <tr>
        <td>TOLIMA</td>
        <td>4</td>
        <td>58,224,961.73</td>
      </tr>
      <tr>
        <td>FUSA,MELGAR,GIRARDOT.</td>
        <td>5</td>       
        <td>10,817,773.14</td>
      </tr>
      <tr>    
        <td>RICAURTE BOGOTA</td>
        <td>6</td>
        <td>3,879,908.19</td>
      </tr>
      <tr>
        <td>DECORARCO CALI</td>
        <td>7</td>
        <td>03</td>
        <td>2,712,981.42</td>
      </tr>
      <tr>
        <td>8</td>
        <td></td>
        <td>1,128,287.50</td>
      </tr>
      <tr>
        <td>COSTA ATLANTICA</td>
        <td>9</td>
        <td>758,934.95</td>
      </tr>
      <tr>
        <td>ANTIOQUIA</td>
        <td>10</td>
        <td>0.30</td>
      </tr>
      <tr>
        <td>EJE CAF.PEREIRA</td>
        <td>11</td>
        <td>775,731,615.04</td>
      </tr>
      <tr>
        <td>ZONA SUR (VALLE/CAUCA/NARIÑO)</td>
        <td>12</td>
        <td>503,927,312.80</td>
      </tr>
      <tr>
        <td>HUILA Y CAQUETA</td>
        <td>13</td>
        <td>239,755,868.94</td>
      </tr>
      <tr>
        <td>TOLIMA</td>
        <td>14</td>
        <td>58,224,961.73</td>
      </tr>
      <tr>
        <td>FUSA,MELGAR,GIRARDOT.</td>
        <td>15</td>        
        <td>10,817,773.14</td>
      </tr>
      <tr>
        <td>RICAURTE BOGOTA</td>
        <td>16</td>
        <td>3,879,908.19</td>
      </tr>
    </tbody>
  </table>
</div>

2 respuestas 2

0

Podrías intentar colocando la propiedad de DataTable responsive, ademas te recomendaria agregar la propiedad bDestroy si es que necesitas que la tabla se vuelva a leer:

bDestroy: true,
responsive: true,

si necesitas mas información, recuerda consultar la documentación oficial documentación oficial

1
  • Ya lo he leido y no me dice nada de como arreglarlo, intente con el destroy y tampoco funciona al igual con el responsive
    – PANGALLETA
    Commented el 19 mar. 2019 a las 12:19
0

Esa no es la forma correcta de hacer un responsive, aqui te dejo la documentacion de como hacer datatables de forma responsive:

https://datatables.net/extensions/responsive/examples/

Y esto para darle estilos a tus botones de exportar

Datatables + bootstrap 4 + botones export + personalizacion

https://codepen.io/coderalexis/pen/gKqLEK

Y si por otro lado aun usas Bootstrap 3:

https://codepen.io/coderalexis/pen/XYOPEP

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.