jQuery DataTables: ancho de la tabla de control

Tengo un problema para controlar el ancho de una tabla usando el complemento jQuery DataTables. Se supone que la mesa tiene el 100% del ancho del contenedor, pero termina siendo un ancho arbitrario, bastante menor que el ancho del contenedor.

Sugerencias apreciadas

La declaración de la tabla se ve así

<table id="querytableDatasets" class="display" cellspacing="0"
cellpadding="3"     width="100%">

Y el javascript

jQuery('#tab-datasets').load('/cgi-bin/qryDatasets', '', function (){  
    jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false  
    });  
});  `  

Al inspeccionar el HTML en Firebug, verá esto (tenga en cuenta el estilo agregado = "ancho: 0px;")

<table id="querytableDatasets" class="display" cellspacing="0" 
cellpadding="3" width="100%" style="width: 0px;">

Mirando en Firebug los estilos, el estilo table.display ha sido anulado. No puedo ver de donde viene esto

element.style {  
  width:0;}    

-- dataTables.css (line 84
table.display { 
  margin:0 auto;  
  width:100%;  
}  

El problema se debe a que dataTable debe calcular su ancho, pero cuando se usa dentro de una pestaña, no es visible, por lo que no se pueden calcular los anchos. La solución es llamar a 'fnAdjustColumnSizing' cuando se muestra la pestaña.

Preámbulo

Este ejemplo muestra cómo las tablas de datos con desplazamiento se pueden usar junto con las pestañas de la interfaz de usuario de jQuery (o de hecho, cualquier otro método mediante el cual la tabla esté en un elemento oculto (mostrar: ninguno) cuando se inicializa). La razón por la que esto requiere una consideración especial, es que cuando se inicializa DataTables y está en un elemento oculto, el navegador no tiene ninguna medida con la que dar DataTables, y esto requerirá en la desalineación de columnas cuando el desplazamiento está habilitado.

El método para evitar esto es llamar a la función de API fnAdjustColumnSizing. Esta función calculará los anchos de columna necesarios en función de los datos actuales y luego volverá a dibujar la tabla, que es exactamente lo que se necesita cuando la tabla se vuelve visible por primera vez. Para esto usamos el método 'show' proporcionado por las tablas de jQuery UI. Verificamos si la DataTable se ha creado o no (observe el selector adicional para 'div.dataTables_scrollBody', esto se agrega cuando se inicializa la DataTable). Si la tabla se ha inicializado, la redimensionamos. Se podría agregar una optimización para cambiar el tamaño solo de la primera muestra de la tabla.

Código de inicialización

$(document).ready(function() {
    $("#tabs").tabs( {
        "show": function(event, ui) {
            var oTable = $('div.dataTables_scrollBody>table.display', ui.panel).dataTable();
            if ( oTable.length > 0 ) {
                oTable.fnAdjustColumnSizing();
            }
        }
    } );

    $('table.display').dataTable( {
        "sScrollY": "200px",
        "bScrollCollapse": true,
        "bPaginate": false,
        "bJQueryUI": true,
        "aoColumnDefs": [
            { "sWidth": "10%", "aTargets": [ -1 ] }
        ]
    } );
} );

Vea esto para más información.

Querrá modificar dos variables cuando inicialice las tablas de datos: bAutoWidthyaoColumns.sWidth

Suponiendo que tiene 4 columnas con anchos de 50px, 100, 120px y 30px, haría:

jQuery('#querytableDatasets').dataTable({  
        "bPaginate": false,  
        "bInfo": false,  
        "bFilter": false,
        "bAutoWidth": false,
        "aoColumns" : [
            { sWidth: '50px' },
            { sWidth: '100px' },
            { sWidth: '120px' },
            { sWidth: '30px' }
        ]  
    }); 

Puede encontrar más información sobre la inicialización de tablas de datos en http://datatables.net/usage

Esté atento a la interacción entre esta configuración de widhts y el CSS que está aplicando. Puede comentar su CSS existente antes de intentar esto para ver qué tan cerca se acerca.

jQuery('#querytableDatasets').dataTable({  
        "bAutoWidth": false
});

Bueno, no estoy familiarizado con ese complemento, pero ¿podrías restablecer el estilo después de agregar la tabla de datos? Algo como

$("#querydatatablesets").css("width","100%")

después de la llamada .dataTable?

He tenido numerosos problemas con los anchos de columna de las tablas de datos. La solución mágica para mí fue incluir la línea

table-layout: fixed;

este CSS va con el CSS general de la tabla. Por ejemplo, si ha declarado las tablas de datos como las siguientes:

LoadTable = $('#LoadTable').dataTable.....

entonces la línea css mágica iría en la clase Loadtable

#Loadtable {
margin: 0 auto;
clear: both;
width: 100%;
table-layout: fixed;

}

La solución TokenMacGuys funciona mejor porque es el resultado de un error en jQdataTable. Lo que sucede es que si usa $ ('# sometabe'). DataTable (). FnDestroy () el ancho de la tabla se establece en 100px en lugar de 100%. Aquí hay una solución rápida:

$('#credentials-table').dataTable({
        "bJQueryUI": false,
        "bAutoWidth": false,
        "bDestroy": true,
        "bPaginate": false,
        "bFilter": false,
        "bInfo": false,
    "aoColumns": [
           { "sWidth": "140px" },
           { "sWidth": "300px" },
           { "sWidth": "50px" }       
        ],
        "fnInitComplete": function() {

            $("#credentials-table").css("width","100%");
        }

    });

Agregue esta clase css a su página, solucionará el problema:

#<your_table_id> {
    width: inherit !important;
}

Establecer anchos explícitamente usando sWidthpara cada columna Y bAutoWidth: falseen la dataTableinicialización resolvió mi problema (similar). Me encanta la pila desbordante.

Tienes que dejar al menos un campo sin campo fijo, por ejemplo:

$('.data-table').dataTable ({

 "bAutoWidth": false,
 "aoColumns" : [
    null,
    null,
    null,                    
    null,
    {"sWidth": "20px"},
    { "sWidth": "20px"}]
});

Puede cambiar todo, pero dejar solo uno como nulo, para que se pueda estirar. Si pones anchos en TODOS, no funcionará. ¡Espero haber ayudado a alguien hoy!

"fnInitComplete": function() {
    $("#datatables4_wrapper").css("width","60%");
 }

Esto funcionó bien para ajustar todo el ancho de la mesa. ¡Gracias @Peter Drinnan!

Como en la tabla de datos 10.1, esto es sencillo. Simplemente coloque el atributo de ancho en su tabla en HTML. es decir, ancho = "100%", esto anulará todos los estilos CSS establecidos por DT.

Vea esto http://www.datatables.net/examples/basic_init/flexible_width.html

Ninguna de las soluciones aquí funcionó para mí. Incluso el ejemplo en la página de inicio de las tablas de datos no funcionó, por lo tanto, la inicialización de la tabla de datos en la opción mostrar.

Encontré una solución al problema. El truco consiste en usar la opción de activación para las pestañas y llamar a fnAdjustColumnSizing () en la tabla visible :

$(function () {

// INIT TABS WITH DATATABLES
$("#TabsId").tabs({
    activate: function (event, ui) {
        var oTable = $('div.dataTables_scrollBody>table:visible', ui.panel).dataTable();
        if (oTable.length > 0) {
            oTable.fnAdjustColumnSizing();
        }
    }
});

// INIT DATATABLES
// options for datatables
var optDataTables = {
    "sScrollY": "200px",
    "bScrollCollapse": true,
    "bPaginate": false,
    "bJQueryUI": true,
    "aoColumnDefs": [
        { "sWidth": "10%", "aTargets": [-1] }
    ]
};
// initialize data table
$('table').dataTable(optDataTables);

});

Solo para decir que tuve exactamente el mismo problema que usted, aunque solo estaba aplicando JQuery a una tabla normal sin Ajax. Por alguna razón, Firefox no expande la tabla después de revelarla. Solucioné el problema colocando la tabla dentro de un DIV y aplicando los efectos al DIV en su lugar.

¿Estás haciendo esto en el evento listo?

$ (documento). listo (función () {...});

Es muy probable que el tamaño dependa de que el documento esté completamente cargado.

Para cualquiera que tenga problemas para ajustar el ancho de la tabla / celda usando el complemento de encabezado fijo:

Datatables se basa en las etiquetas thead para los parámetros de ancho de columna. Esto se debe a que es realmente el único html nativo, ya que la mayor parte del html interno de la tabla se genera automáticamente.

Sin embargo, lo que sucede es que parte de su celda puede ser más grande que el ancho almacenado dentro de las celdas de la cabeza.

Es decir, si su tabla tiene muchas columnas (tabla ancha) y sus filas tienen muchos datos, entonces llamar a "sWidth": para cambiar el tamaño de celda td no funcionará correctamente porque las filas secundarias cambian automáticamente el tamaño de los td según el desbordamiento content y esto sucede después de que la tabla se haya inicializado y pasado sus parámetros de inicio.

El thead original "sWidth": los parámetros se anulan (encogen) porque las tablas de datos piensan que su tabla todavía tiene su ancho predeterminado de% 100 - no reconoce que algunas celdas están desbordadas.

Para solucionar esto, descubrí el ancho de desbordamiento y lo tomé en cuenta cambiando el tamaño de la tabla en consecuencia después de que se haya inicializado; mientras estamos en eso, podemos iniciar nuestro encabezado fijo al mismo tiempo:

$(document).ready(function() {
  $('table').css('width', '120%');
  new FixedHeader(dTable, {
        "offsetTop": 40,
      });
});

cree su Fixedheader dentro del "éxito" de su llamada ajax, no tendrá ningún problema de alineación en el encabezado y las filas.

success: function (result) {
              /* Your code goes here */

    var table = $(SampleTablename).DataTable();

        new $.fn.dataTable.FixedHeader(table);
}        

Espero que esto ayude a alguien que todavía está luchando.

No guarde su mesa dentro de ningún recipiente. Haga que el envoltorio de la tabla sea su contenedor después de que la tabla esté renderizada. Sé que esto podría no ser válido en lugares donde tiene algo más junto con la tabla, pero siempre puede agregar ese contenido.

Para mí, este problema surge si tiene una barra lateral y un contenedor que en realidad es un desplazamiento de esa barra lateral.

$(YourTableName+'_wrapper').addClass('mycontainer');

(Agregué un panel de panel predeterminado)
Y su clase:

.mycontainer{background-color:white;padding:5px;}

encuentre otro enlace útil sobre este problema y resolvió mi problema.

<table width="100%">
<tr>
    <td width="20%"> Left TD <td>
    <td width="80%"> Datatable </td>
</tr>
</table>

Tabla de ancho de fuerza de Datatables

Me encontré con un problema similar al tener un div envuelto alrededor de la mesa.

Agregar posición: relativo lo arregló para mí.

#report_container {
 float: right;
 position: relative;
 width: 100%;
}

Tuve un problema similar en el que el contenido de la tabla era más grande que el encabezado y el pie de página de la tabla. Agregar un div alrededor de la mesa y configurar x-overflow parece haber solucionado este problema:

Asegúrese de que todos los demás parámetros anteriores a bAutoWidth & aoColumns se hayan ingresado correctamente. Cualquier parámetro incorrecto anterior romperá esta funcionalidad.

Tuve un problema similar y descubrí que el texto en las columnas no se rompe y el uso de este código css resolvió el problema

th,td{
max-width:120px !important;
word-wrap: break-word
}

Esta es mi forma de hacerlo ..

$('#table_1').DataTable({
    processing: true,
    serverSide: true,
    ajax: 'customer/data',
    columns: [
        { data: 'id', name: 'id' , width: '50px', class: 'text-right' },
        { data: 'name', name: 'name' width: '50px', class: 'text-right' }
    ]
});

Hoy encuentro el mismo problema.

Usé una forma complicada de resolverlo.

Mi código de la siguiente manera.

$('#tabs').tabs({
    activate: function (event, ui) {
       //redraw the table when the tab is clicked
       $('#tbl-Name').DataTable().draw();
    }
});

Compruebe también esta solución. esto resolvió mi problema de ancho de columna de DataTable fácilmente

JQuery DataTables 1.10.20 presenta un columns.adjust()método que soluciona el problema de la pestaña de alternancia de Bootstrap

 $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {
    $.fn.dataTable.tables( {visible: true, api: true} ).columns.adjust();
} );

Consulte la documentación: Pestañas de desplazamiento y Bootstrap

Esto funciona bien.

#report_container {
   float: right;
   position: relative;
   width: 100%;
}