0

Buen día!

Ando por aquí, ya que hace poquito tiempo empecé a utilizar DataTables para mi proyecto, todo iba bien, hasta que intenté utilizar fixedColumns, me basé en el siguiente ejemplo

Yo tengo el siguiente código

Tabla (Aclaro que el link de bootstrap 4 no está porque está directo en el template)

<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.bootstrap4.min.css" rel="stylesheet" />
<table id="tabla" class="table table-striped table-bordered nowrap" style="width:100%">
    <thead>
        <tr>
            <th>@Html.DisplayNameFor(x => x.Codigo_delfos)</th>
            <th>@Html.DisplayNameFor(x => x.nv)</th>
            <th>@Html.DisplayNameFor(x => x.cliente)</th>
            <th>@Html.DisplayNameFor(x => x.norma)</th>
            <th>@Html.DisplayNameFor(x => x.potencia)</th>
            <th>@Html.DisplayNameFor(x => x.tension_mayor)</th>
            <th>@Html.DisplayNameFor(x => x.tension_menor)</th>
            <th>@Html.DisplayNameFor(x => x.material_mayor)</th>
            <th>@Html.DisplayNameFor(x => x.material_menor)</th>
            <th>@Html.DisplayNameFor(x => x.frecuencia)</th>
            <th>@Html.DisplayNameFor(x => x.GrupoDeConexiones)</th>
            <th>@Html.DisplayNameFor(x => x.Regulacion)</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model)
        {
            <tr>
                <td>@Html.DisplayFor(x => item.Codigo_delfos)</td>
                <td>@Html.DisplayFor(x => item.nv)</td>
                <td>@Html.DisplayFor(x => item.cliente)</td>
                <td>@Html.DisplayFor(x => item.norma)</td>
                <td>@Html.DisplayFor(x => item.potencia)</td>
                <td>@Html.DisplayFor(x => item.tension_mayor)</td>
                <td>@Html.DisplayFor(x => item.tension_menor)</td>
                <td>@Html.DisplayFor(x => item.material_mayor)</td>
                <td>@Html.DisplayFor(x => item.material_menor)</td>
                <td>@Html.DisplayFor(x => item.frecuencia)</td>
                <td>@Html.DisplayFor(x => item.GrupoDeConexiones)</td>
                <td>@Html.DisplayFor(x => item.Regulacion)</td>

            </tr>
        }

    </tbody>
</table>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script>

JavaScript

$(document).ready(function () {
    var table = $('#tabla').DataTable({
        scrollY: "300px",
        scrollX: true,
        scrollCollapse: true,
        paging: false,
        fixedColumns:
            {
                leftColumns: 1,
                rightColumns: 1
        }
    });
});

Tanto la primera, como la última columna, efectivamente se fijan, el problema,es que se genera un bug visual.

Error DataTables

Como puede verse en la imagen, detrás de la columna puede verse el texto de las otras columnas que se van moviendo con el scroll.

Y por el otro lado, se agrega un scroll individual a cada una de las columnas fijadas.

Me extraña llegar a este resultado utilizando un ejemplo casi exacto al que da DataTables en su documentación.

¿Alguien tuvo este problema? ¿Cómo debería encararlo?

Muchísimas gracias!

EDIT:

Tras la ayuda de Sebastián Lagos Yañez la tabla se ve mejor, la primera columna funciona perfectamente, pero sigo teniendo problemas con la última (sigue generando scroll horizontal por algún motivo)

introducir la descripción de la imagen aquí

4
  • revisa bien tus cdns , a mi me funciona con tu código sin problema , me deja fixed el thead y las columnas se mueven como corresponde Commented el 1 jun. 2018 a las 13:48
  • @SebastiánLagosYañez A mi me los fija también, el tema es ese scroll horizontal que añade en las 2 columnas que fijo, te referis al orden de los cdn? Commented el 1 jun. 2018 a las 13:53
  • a mi no me salen esas barras, además ese que te aparece es por el border de la tabla.Para mi es normal que aparezca, y si, verifica el orden de los cdn Commented el 1 jun. 2018 a las 13:56
  • @SebastiánLagosYañez a que te refieres con que es normal? El problema que tengo asumo que se da debido al scroll horizontal extra que se esta generando en la columna de ambos fijados Commented el 1 jun. 2018 a las 13:58

2 respuestas 2

3

Revisando tu código para que se resuelva tu dilema lo hice de la siguiente manera: Estarán el orden de los cdns.

var table = $('#tabla').DataTable({
  scrollY: "300px",
  scrollX: true,
  scrollCollapse: true,
  paging: false,
  fixedColumns: {
    leftColumns: 1,
    rightColumns: 1
  }
});
table {
  display: table;
  border-collapse: separate;
  border-spacing: 0;
  /*Se deja en 0 para evitar tu problema de que se vean atras*/
  border-color: grey;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">

<link href="https://cdn.datatables.net/1.10.16/css/dataTables.bootstrap4.min.css" rel="stylesheet" />
<link href="https://cdn.datatables.net/fixedcolumns/3.2.4/css/fixedColumns.bootstrap4.min.css" rel="stylesheet" />

<table id="tabla" class="display table table-striped table-bordered nowrap" style="width:100%">
  <thead>
    <tr>
      <th>Columna</th>
      <th>Columna</th>
      <th>Columna</th>
      <th>Columna</th>
      <th>Columna</th>
      <th>Columna</th>
      <th>Columna</th>
      <th>Columna</th>
      <th>Columna</th>
      <th>Columna</th>
      <th>Columna</th>
      <th>Columna</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>

    </tr>
    <tr>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>

    </tr>
    <tr>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>

    </tr>
    <tr>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>

    </tr>
    <tr>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>

    </tr>
    <tr>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>

    </tr>
    <tr>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>

    </tr>
    <tr>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>

    </tr>
    <tr>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>

    </tr>
    <tr>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>

    </tr>
    <tr>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>

    </tr>
    <tr>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>
      <td>datos</td>

    </tr>

  </tbody>
</table>
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/fixedcolumns/3.2.4/js/dataTables.fixedColumns.min.js"></script>

Para resolver esto tienes que definir la tabla nuevamente en css y dejar la propiedad border-spacing que estaba en 2px , dejarla en 0.Deje los cdns en el orden para que funcionen , el resto no tiene modificación.Saludos.

1
  • Primero que nada muchísimas gracias, ahí funcionó casi perfecto, lo único que me sigue fallando es la columna de la derecha, que sigue teniendo un scroll individual, y lamentablemente me genera un bug casi identico al que se daba en la columna izquierda Commented el 1 jun. 2018 a las 14:15
0

En StackOverflow en inglés, alguien logró darme la solución, la pregunta fue esta y la solución fue la siguiente:

<style>
    .DTFC_LeftBodyLiner{overflow-y:unset !important}
    .DTFC_RightBodyLiner{overflow-y:unset !important}
</style>

Tras agregar esto, y combinarlo un poco con la respuesta de Sebastián (más específicamente el border-spacing: 0) todo funciona correctamente!

Muchas gracias a todos los que se tomaron el tiempo!

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.