Usando el scroll horizontal de jquery datatables la tabla se daña

publicado por: Anonymous

Tengo un problema al momento de usar el plugin jquery datatables con el scroll horizontal.

Active el scroll horizontal para las ocasiones en que la tabla es mas grande que el contenedor y de esta manera se mantengan las proporciones justas, sin embargo en un tabla que funcionaba correctamente sin el scroll, se daño al activar el scroll en el eje horizontal.

Para activar el scroll uso las siguiente lineas de código:

$(document).ready(function() {
    $('#tblemp').DataTable( {
        "scrollX": true
    } );
} );

Tabla con el problema

_x000D_

_x000D_

$(document).ready(function() {_x000D_
    $('#example').DataTable( {_x000D_
        "scrollX": true_x000D_
    } );_x000D_
} );

_x000D_

<!DOCTYPE html>_x000D_
<html>_x000D_
<head>_x000D_
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>_x000D_
  <script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>  _x000D_
  <link rel="stylesheet" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">_x000D_
  <!-- Compiled and minified CSS -->_x000D_
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">_x000D_
_x000D_
  <!-- Compiled and minified JavaScript -->_x000D_
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>_x000D_
  <meta charset="utf-8">_x000D_
  <meta name="viewport" content="width=device-width">_x000D_
  <title>Problema</title>_x000D_
</head>_x000D_
<body>_x000D_
<div class="container">_x000D_
  <div class="row">_x000D_
    <div class="col s12 m12 l12">_x000D_
      <table id="example">_x000D_
        <thead>_x000D_
        <tr>_x000D_
          <th class="tg-031e">Cedula</th>_x000D_
          <th class="tg-031e">Nombres</th>_x000D_
          <th class="tg-yw4l">Modalidad</th>_x000D_
          <th class="tg-yw4l">Email</th>_x000D_
          <th class="tg-yw4l">Actualizar</th>_x000D_
          <th class="tg-yw4l">Eliminar</th>_x000D_
        </tr>_x000D_
        </thead>_x000D_
        <tbody>_x000D_
        <tr>_x000D_
          <td class="tg-031e">0702110453</td>_x000D_
          <td class="tg-031e">SAQUINAULA RODRIGO PATRICIO</td>_x000D_
          <td class="tg-yw4l">nombramiento</td>_x000D_
          <td class="tg-yw4l"></td>_x000D_
          <td class="tg-yw4l">X</td>_x000D_
          <td class="tg-yw4l">O</td>_x000D_
        </tr>_x000D_
        <tr>_x000D_
          <td class="tg-031e">0702471806</td>_x000D_
          <td class="tg-031e">JIMENEZ FEIJOO GRACIELA ESPERANZA</td>_x000D_
          <td class="tg-yw4l">nombramiento</td>_x000D_
          <td class="tg-yw4l">[email protected]</td>_x000D_
          <td class="tg-yw4l">X</td>_x000D_
          <td class="tg-yw4l">O</td>_x000D_
        </tr>_x000D_
        <tr>_x000D_
          <td class="tg-yw4l"></td>_x000D_
          <td class="tg-yw4l"></td>_x000D_
          <td class="tg-yw4l"></td>_x000D_
          <td class="tg-yw4l"></td>_x000D_
          <td class="tg-yw4l"></td>_x000D_
          <td class="tg-yw4l"></td>_x000D_
        </tr>_x000D_
        </tbody>_x000D_
      </table>_x000D_
    </div>_x000D_
  </div>_x000D_
</div>_x000D_
_x000D_
</body>_x000D_
</html>

_x000D_

_x000D_

_x000D_

A continuación la tabla normal, y la tabla deformada.

Tabla Normal
Tabla Normal

Tabla Dañada
Tabla Dañada

En la tabla deforme se puede ver como las columnas aparecen desfasadas, es decir que la cabecera con concuerda con el cuerpo de tabla.

¿Qué podría hacer para solucionar este problema?

EDIT

Me he dado cuenta el problema es con pantallas grandes, ajustando el ancho del div a 800px se arregla de alguna manera el problema, pero no es lo que busco, ya que necesito que la tabla se vea en todo el espacio del contenedor.

Con esta linea de css, se arregla pero solo con el ancho 800px

div.dataTables_wrapper {
    width: 800px;
    margin: 0 auto;
}

solución

Una solución es definir que el estilo .dataTables_scrollHeadInner tenga margin: 0 auto (para centrar la table que contiene los headers

// UPDATE

Si quieres que ocupe el 100% del ancho disponible, podrias hacer esto:

  • Crear una regla para #example que indique width:100%.
  • Para hacerla responsive, podemos hacer un JS para detectar el resize del navegador y actualizar el tamaño de la table ya el plugin para scroll horizontal establece a la misma un ancho en px.

Así:

_x000D_

_x000D_

$(document).ready(function() {_x000D_
  var table = $('#example').DataTable({_x000D_
    "scrollX": true_x000D_
  });_x000D_
  _x000D_
  $(window).on('resize', function() {_x000D_
    $('#example').css('width', '100%');_x000D_
    table.draw(true);_x000D_
  });_x000D_
});

_x000D_

#example {_x000D_
  width: 100%;_x000D_
}_x000D_
.dataTables_scrollHeadInner {_x000D_
  margin: 0 auto;_x000D_
}

_x000D_

<!DOCTYPE html>_x000D_
<html>_x000D_
_x000D_
<head>_x000D_
  <script src="https://code.jquery.com/jquery-2.2.4.js"></script>_x000D_
  <script src="//cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>_x000D_
  <link rel="stylesheet" href="//cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css">_x000D_
  <!-- Compiled and minified CSS -->_x000D_
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/css/materialize.min.css">_x000D_
_x000D_
  <!-- Compiled and minified JavaScript -->_x000D_
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.2/js/materialize.min.js"></script>_x000D_
  <meta charset="utf-8">_x000D_
  <meta name="viewport" content="width=device-width">_x000D_
  <title>Problema</title>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
  <div class="container">_x000D_
    <div class="row">_x000D_
      <div class="col s12 m12 l12">_x000D_
        <table id="example">_x000D_
          <thead>_x000D_
            <tr>_x000D_
              <th class="tg-031e">Cedula</th>_x000D_
              <th class="tg-031e">Nombres</th>_x000D_
              <th class="tg-yw4l">Modalidad</th>_x000D_
              <th class="tg-yw4l">Email</th>_x000D_
              <th class="tg-yw4l">Actualizar</th>_x000D_
              <th class="tg-yw4l">Eliminar</th>_x000D_
            </tr>_x000D_
          </thead>_x000D_
          <tbody>_x000D_
            <tr>_x000D_
              <td class="tg-031e">0702110453</td>_x000D_
              <td class="tg-031e">SAQUINAULA RODRIGO PATRICIO</td>_x000D_
              <td class="tg-yw4l">nombramiento</td>_x000D_
              <td class="tg-yw4l"></td>_x000D_
              <td class="tg-yw4l">X</td>_x000D_
              <td class="tg-yw4l">O</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
              <td class="tg-031e">0702471806</td>_x000D_
              <td class="tg-031e">JIMENEZ FEIJOO GRACIELA ESPERANZA</td>_x000D_
              <td class="tg-yw4l">nombramiento</td>_x000D_
              <td class="tg-yw4l">[email protected]</td>_x000D_
              <td class="tg-yw4l">X</td>_x000D_
              <td class="tg-yw4l">O</td>_x000D_
            </tr>_x000D_
            <tr>_x000D_
              <td class="tg-yw4l"></td>_x000D_
              <td class="tg-yw4l"></td>_x000D_
              <td class="tg-yw4l"></td>_x000D_
              <td class="tg-yw4l"></td>_x000D_
              <td class="tg-yw4l"></td>_x000D_
              <td class="tg-yw4l"></td>_x000D_
            </tr>_x000D_
          </tbody>_x000D_
        </table>_x000D_
      </div>_x000D_
    </div>_x000D_
  </div>_x000D_
_x000D_
</body>_x000D_
_x000D_
</html>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *