Tengo una tabla de datos que se completa con datos json a través de ajax. Tengo la propiedad autoWidth establecida en falso. Lo que busco hacer es configurar ciertas columnas para que tengan un ancho basado en el contenido que se devuelve.
Lo que parece que sucede durante la paginación es que la tabla se vuelve a dibujar o algo así cada página a la que voy. Esto hace que las columnas reboten en diferentes posiciones y/o cambien el ancho de esa columna. Parece que no puedo encontrar lo que necesito hacer.
Lo que estoy buscando es una vez que la tabla se cargue con datos la primera vez que el ancho mínimo de cada columna se establezca en el contenido de datos más grande devuelto en esa fila. Espero estar explicando eso correctamente. Lo que finalmente quiero es que las columnas no ajusten los anchos después de que los datos se carguen por primera vez. Entonces no en paginación o clasificación de columnas.
Lo único que probé fue table.columns.adjust().draw(); pero puse la función drawCallback porque no sabía dónde más hacerlo. Eso no pareció hacer nada por mí.
He buscado en Google durante suficiente tiempo sobre esto y esperaba que alguien pudiera al menos indicarme la dirección correcta o brindarme un poco de ayuda.
No puedo pensar en una buena manera de hacer esto usando DataTables, ya que los anchos de columna deben declararse al inicializar.
Sin embargo, puedes hacer algo bastante similar usando JavaScript y CSS estándar después de que todo se haya cargado:
// get the table headers into an array let tableHeaders = document.querySelectorAll("#YOUR-TABLE-ID thead th"); tableHeaders.forEach((element) => { // get the computed width for the column const computedWidth = window.getComputedStyle(element).getPropertyValue("width"); // set CSS min-width on element element.style.minWidth = computedWidth; }); Los anchos se aplicarán automáticamente a todos los elementos <td> dentro de la misma columna que un elemento <th> que tiene estilos de ancho.
También tenga en cuenta que DataTables asigna una propiedad de estilo de width a cada elemento <th> .