Cómo cambiar el tamaño de una JQuery/Datatable después de ocultar columnas

Question

uso el complemento DataTables para JQuery, mi problema radica básicamente en el hecho de que mi datatable tiene muchas columnas y (visualmente) sale de los límites de su contenedor (una etiqueta div). Luego escondo algunas de las columnas que, en este punto, son irrelevantes. Pero el ancho de la tabla simplemente no cambia de tamaño a sí mismo (digamos a witdh de su padre). He intentado utilizar la función

fnAdjustColumnSizing() 

después de crear la tabla de datos pero no parece funcionar (también intenté volver a dibujar la mesa con fnDraw()). He intentado así dar algunos parámetros iniciales con el fin de conseguir un tamaño más pequeño en cada columna

$("#reportTable").dataTable({"aoColumns":[{sWidth:"10%"},{sWidth:"10%"},{sWidth:"10%"}]}); 

pero arroja un error ya que tengo a "encender" el parámetro bRetrieve (que lo hice más adelante, pero no funcionó, solo evita que aparezca el error). Entonces ... técnicamente quiero hacer que mi datatable sea más pequeña después de que algunas columnas estén ocultas.

Gracias de antemano.

Answer 1

La solución fue en realidad más simple de lo que pensaba. Utilizando la función "inspeccionar elemento" en google chrome encontré que, al llamar al método de tabla de datos "datatable()", la API de datatables utilizaba un ancho fijo en función del espacio necesario para mostrar la cantidad de columnas. Era algo así como 1947 píxeles más o menos. Por lo tanto, no puede cambiar esto usando CSS simple porque el ancho fijo utilizado por las tablas de datos tiene una prioridad más alta. La solución que encontré fue usando el método de "ancho" de jquery después de ocultar las columnas:

$("#reportTable").width("100%"); 

ya que cambia el atributo anchura directamente en el elemento de tabla.

Answer 2

Para establecer el ancho de las columnas en las tablas de datos, doy a las columnas diferentes clases usando el parámetro sClass y luego establezco el ancho usando css.

Si hay una columna en los datos pero no la quiere que sea visible, establezca bVisible en falso y no representará la columna en lugar de ocultarla después de la renderización.