0

No se porque la cabecera se daña de esta forma.introducir la descripción de la imagen aquí

var dataTable = $('#tblDistribucionZonas').DataTable({
 language: {
      lengthMenu: "Display _MENU_ records per page",
      zeroRecords: "Nothing found - sorry",
      info: "Showing page _PAGE_ of _PAGES_",
      infoEmpty: "No records available",
      search: "",
      searchPlaceholder: "Buscar",
      loadingRecords: "Cargando...",
      processing: "Procesando....",
      paginate: {
        first: "primero",
        last: "ultimo",
        next: "siguiente",
        previous: "anterior"
      },
      infoFiltered: "(filtered from _MAX_ total records)"
    },
    processing: true,
    scrollX: true,
    order: [],
    dom: 'lBfrtip',
    buttons: [
        'copy', 'excel', 'pdf'
    ],

});
.table-responsive{
  border: 0px;
}
.table{
  border: 1px solid #ddd !important;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

<table class="table table-bordered" cellspacing="0" width="100%" id="tblDistribucionZonas">
          <thead>
            <tr>
              <th>Puesto en el top</th>
              <th>Id</th>
              <th>Zona</th>
              <th>Venta</th>
              <th>Ingreso</th>
              <th>Iva</th>
              <th>Descuento</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>01</td>
              <td>EJE CAF.PEREIRA</td>
              <td>775,731,615.04</td>
              <td>652,014,223.20</td>
              <td>123,717,391.84</td>
              <td>40,579,517.40</td>
            </tr>
            <tr>
              <td>2</td>
              <td>06</td>
              <td>ZONA SUR (VALLE/CAUCA/NARIÑO)</td>           
              <td>503,927,312.80</td>
              <td>423,468,330.43</td>
              <td>80,458,982.37</td>
              <td>25,358,819.59</td>
            </tr>
            <tr>
              <td>3</td>
              <td>05</td>
              <td>HUILA Y CAQUETA</td>
              <td>239,755,868.94</td>
              <td>201,475,520.14</td>
              <td>38,280,348.80</td>
              <td>8,067,695.74</td>
            </tr>
            <tr>
              <td>4</td>
              <td>04</td>
              <td>TOLIMA</td>
              <td>58,224,961.73</td>
              <td>48,928,539.28</td>
              <td>9,296,422.45</td>
              <td>2,681,183.20</td>
            </tr>
            <tr>
              <td>5</td>
              <td>14</td>
              <td>FUSA,MELGAR,GIRARDOT.</td> 
              <td>10,817,773.14</td>
              <td>9,090,565.60</td>
              <td>1,727,207.54</td>
              <td>439,624.00</td>
            </tr>
            <tr>
              <td>6</td>
              <td>13</td>
              <td>RICAURTE BOGOTA</td>
              <td>3,879,908.19</td>
              <td>3,260,427.04</td>
              <td>619,481.15</td>
              <td>116,095.95</td>
            </tr>
            <tr>
              <td>7</td>
              <td>03</td>
              <td>DECORARCO CALI</td>
              <td>2,712,981.42</td>
              <td>2,279,816.31</td>
              <td>433,165.11</td>
              <td>291,163.00</td>
            </tr>
            <tr>
              <td>8</td>
              <td></td>
              <td></td>
              <td>1,128,287.50</td>
              <td>948,140.75</td>
              <td>180,146.75</td>
              <td>99,302.00</td>
            </tr>
            <tr>
              <td>9</td>
              <td>08</td>
              <td>COSTA ATLANTICA</td>
              <td>758,934.95</td>
              <td>637,760.46</td>
              <td>121,174.49</td>
              <td>0.00</td>
            </tr>
            <tr>
              <td>10</td>
              <td>07</td>
              <td>ANTIOQUIA</td>
              <td>0.30</td>
              <td>0.30</td>
              <td>0.00</td>
              <td>0.00</td>
            </tr>
          </tbody>
        </table>
          <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  </body>
</html>

4
  • es un problema tipico de datatable... Commented el 26 feb. 2019 a las 13:48
  • sabes como arreglarlo
    – PANGALLETA
    Commented el 26 feb. 2019 a las 13:55
  • tienes mas tablas en la misma pagina o solo esa ? Commented el 26 feb. 2019 a las 14:05
  • solo esa tabla tengo
    – PANGALLETA
    Commented el 26 feb. 2019 a las 14:10

1 respuesta 1

1

Saludos te sugiero actualizar y usar la ultima version de datatables he realizado tu table sin problemas:

var dataTable = $('#tblDistribucionZonas').DataTable({
 language: {
      lengthMenu: "Display _MENU_ records per page",
      zeroRecords: "Nothing found - sorry",
      info: "Showing page _PAGE_ of _PAGES_",
      infoEmpty: "No records available",
      search: "",
      searchPlaceholder: "Buscar",
      loadingRecords: "Cargando...",
      processing: "Procesando....",
      paginate: {
        first: "primero",
        last: "ultimo",
        next: "siguiente",
        previous: "anterior"
      },
      infoFiltered: "(filtered from _MAX_ total records)"
    },
    processing: true,
    scrollX: true,
    order: [],
    dom: 'lBfrtip',
    buttons: [
        'copy', 'excel', 'pdf'
    ],

});
.table-responsive{
  border: 0px;
}
.table{
  border: 1px solid #ddd !important;
}
<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <title>Hello, world!</title>
  </head>
  <body>

<table class="table table-bordered" cellspacing="0" width="100%" id="tblDistribucionZonas">
          <thead>
            <tr>
              <th>Puesto en el top</th>
              <th>Id</th>
              <th>Zona</th>
              <th>Venta</th>
              <th>Ingreso</th>
              <th>Iva</th>
              <th>Descuento</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td>1</td>
              <td>01</td>
              <td>EJE CAF.PEREIRA</td>
              <td>775,731,615.04</td>
              <td>652,014,223.20</td>
              <td>123,717,391.84</td>
              <td>40,579,517.40</td>
            </tr>
            <tr>
              <td>2</td>
              <td>06</td>
              <td>ZONA SUR (VALLE/CAUCA/NARIÑO)</td>           
              <td>503,927,312.80</td>
              <td>423,468,330.43</td>
              <td>80,458,982.37</td>
              <td>25,358,819.59</td>
            </tr>
            <tr>
              <td>3</td>
              <td>05</td>
              <td>HUILA Y CAQUETA</td>
              <td>239,755,868.94</td>
              <td>201,475,520.14</td>
              <td>38,280,348.80</td>
              <td>8,067,695.74</td>
            </tr>
            <tr>
              <td>4</td>
              <td>04</td>
              <td>TOLIMA</td>
              <td>58,224,961.73</td>
              <td>48,928,539.28</td>
              <td>9,296,422.45</td>
              <td>2,681,183.20</td>
            </tr>
            <tr>
              <td>5</td>
              <td>14</td>
              <td>FUSA,MELGAR,GIRARDOT.</td> 
              <td>10,817,773.14</td>
              <td>9,090,565.60</td>
              <td>1,727,207.54</td>
              <td>439,624.00</td>
            </tr>
            <tr>
              <td>6</td>
              <td>13</td>
              <td>RICAURTE BOGOTA</td>
              <td>3,879,908.19</td>
              <td>3,260,427.04</td>
              <td>619,481.15</td>
              <td>116,095.95</td>
            </tr>
            <tr>
              <td>7</td>
              <td>03</td>
              <td>DECORARCO CALI</td>
              <td>2,712,981.42</td>
              <td>2,279,816.31</td>
              <td>433,165.11</td>
              <td>291,163.00</td>
            </tr>
            <tr>
              <td>8</td>
              <td></td>
              <td></td>
              <td>1,128,287.50</td>
              <td>948,140.75</td>
              <td>180,146.75</td>
              <td>99,302.00</td>
            </tr>
            <tr>
              <td>9</td>
              <td>08</td>
              <td>COSTA ATLANTICA</td>
              <td>758,934.95</td>
              <td>637,760.46</td>
              <td>121,174.49</td>
              <td>0.00</td>
            </tr>
            <tr>
              <td>10</td>
              <td>07</td>
              <td>ANTIOQUIA</td>
              <td>0.30</td>
              <td>0.30</td>
              <td>0.00</td>
              <td>0.00</td>
            </tr>
          </tbody>
        </table>
          <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://cdn.datatables.net/responsive/2.2.1/css/responsive.dataTables.min.css">
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
  </body>
</html>

Ahora bien algo que corregi en tu codigo javascript fue que tenias demas un cierre de llaves tenias asi al final:

..
..
 }
});

cuando solo deberia estas:

});

y en ocasiones se necesita reinicializar el datatable con :

"bDestroy": true

para mayor detalle te sugiero leer esto:

Documentacion datatable options

Espero te sirva y suerte..!!

1
  • Pero como puedo utilizar el "bDestroy": true porque lo intento y no funciona
    – PANGALLETA
    Commented el 26 feb. 2019 a las 14:37

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.