0
532
ViewsLos encabezados en una tabla de DataTables colapsan hasta que ocurre algún tipo de redibujado. ¿Hay alguna forma de forzar que se vuelvan a dibujar los encabezados o algo similar?
Mi tabla se está inicializando de esta manera:
distributorsDistributionAreasTable = $('#id').DataTable({ pageLength: 10, lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]], scrollY: '160px', scrollCollapse: true, searching: true, });La tabla está en un diálogo modal. Cuando se carga el cuadro de diálogo, las columnas se colapsan hacia la izquierda. Pero si cambio el tamaño de la ventana o hago clic en una columna, se arreglan solos. Ver el gif. ¿Alguna idea de qué está pasando aquí o cómo solucionarlo?
1 answers
Answer question0
Este es un problema de capacidad de respuesta con DataTables.
Recomendaría lo siguiente para resolver el problema:
1.) Agregue estos scripts/hojas de estilo a su HTML
<script src ="https://cdn.datatables.net/responsive/2.2.9/css/responsive.dataTables.min.css"></script> <script src="https://cdn.datatables.net/responsive/2.2.9/js/dataTables.responsive.min.js"></script> Después de vincularlos, en la inicialización de su tabla, agregue lo siguiente: responsive: true, en cualquier lugar por encima de su opción de scrollY
Según el sitio de DataTables, si está utilizando el desplazamiento vertical (scrollY) y no el desplazamiento horizontal (scrollX), habilite la opción de desplazamiento horizontal para que la tabla tenga espacio para desplazarse. scrollX: true,
Después de habilitar la opción scrollX, agregue lo siguiente a su hoja de estilo CSS:
table.dataTable tbody th, table.dataTable tbody td { white-space: nowrap; }Si eso no resuelve completamente el problema, después de dibujar la tabla, puede llamar a esto para reajustar los tamaños de columna (encabezado).
table.columns.adjust().draw(); });Con todo, debería verse algo como esto:
distributorsDistributionAreasTable = $('#id').DataTable({ responsive: true, pageLength: 10, lengthMenu: [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]], scrollY: '160px', scrollX: true, scrollCollapse: true, scroller: true, searching: true, }); distributorsDistributionAreasTable.columns.adjust().draw(); }); table.dataTable tbody th, table.dataTable tbody td { white-space: nowrap; }