example - jQuery DataTables: ancho de la tabla de control

jquery table example

Question

Tengo un problema para controlar el ancho de una tabla utilizando el complemento jQuery DataTables. Se supone que la tabla es el 100% del ancho del contenedor, pero termina siendo un ancho arbitrario, algo 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, ves esto (fíjate en el estilo agregado = "ancho: 0px;")

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

Buscando en Firebug los estilos, el estilo table.display ha sido anulado. No puedo ver de dónde viene esto

element.style {  
  width:0;}    

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

Answer 1

¿Estás haciendo esto en el evento listo?

$(document).ready(function() { ... });

Es muy probable que el tamaño dependa del documento que se cargue por completo.

Answer 2

Agregue esta clase de CSS a su página, se solucionará el problema:

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

Answer 3

Al igual que en Datatable 10.1, esto es sencillo. Simplemente ponga el atributo width en su tabla en HTML. es decir, width = "100%", esto anulará todos los estilos CSS establecidos por DT.

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

Answer 4

Asegúrese de que todos los demás parámetros antes de bAutoWidth y aoColumns estén ingresados ​​correctamente. Cualquier parámetro erróneo anterior romperá esta funcionalidad.

Answer 5

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

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

después de la llamada .dataTable?

Answer 6

Debe 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 cambiarlo todo, pero deje solo uno como nulo, para que se pueda estirar. Si pone anchos en TODO, no funcionará. ¡Espero haber ayudado a alguien hoy!

Answer 7

Deberá ajustar dos variables cuando inicialice dataTables: bAutoWidth y aoColumns.sWidth

Suponiendo que tiene 4 columnas con anchuras 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'' }
        ]  
    }); 

Se puede encontrar más información sobre la inicialización de dataTables en http://datatables.net/usage

Observe 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 encuentra.

Answer 8

El problema se debe a que dataTable debe calcular su ancho, pero cuando se utiliza dentro de una pestaña, no es visible, por lo tanto, no puede 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 jQuery UI (o cualquier otro método mediante el cual la tabla se encuentre en un elemento oculto (mostrar: ninguno) cuando se inicializa). La razón por la que esto requiere una consideración especial, es que cuando DataTables se inicializa y está en un elemento oculto, el navegador no tiene ninguna medida para dar DataTables, y esto requerirá la desalineación de las columnas cuando se habilita el desplazamiento.

El método para evitar esto es llamar a la función de API fnAdjustColumnSizing. Esta función calculará los anchos de columna que se necesitan según 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'' provisto por las tablas jQuery UI. Comprobamos si DataTable se ha creado o no (observe el selector extra para ''div.dataTables_scrollBody'', esto se agrega cuando DataTable se inicializa). Si la tabla se ha inicializado, la cambiamos de tamaño. 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 this para más información.

Answer 9

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

No guardes tu mesa dentro de ningún contenedor. Convierta la envoltura de la mesa en su contenedor después de que se represente la tabla. Sé que esto podría no ser válido en los lugares donde tienes algo más junto con la mesa, pero luego siempre puedes volver a agregar ese contenido.

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

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

(Agregué un panel de panel-predeterminado)
Y tu clase:

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

Answer 10

Esta es mi manera 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'' }
    ]
});

Answer 11

Establecer anchos explícitamente utilizando sWidth para cada columna Y bAutoWidth: false en la inicialización de dataTable resolvió mi problema (similar). Amo la pila desbordante.

Answer 12

Esto funciona bien

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

Answer 13

He tenido numerosos problemas con el ancho 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 mesa. Por ejemplo, si ha declarado las tablas de datos de la siguiente manera:

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

entonces la línea de magic css iría en la clase Loadtable

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

}

Answer 14

La solución TokenMacGuys funciona mejor porque es el resultado de un error en jQdataTable. Lo que sucede es que si usas $ (''# sometata''). 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%");
        }

    });

Answer 15

Me encontré con un problema similar cuando tenía un div alrededor de la mesa.

Agregar posición: el pariente me lo arregló.

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

Answer 16

Me encuentro con el mismo problema hoy.

Utilicé una forma difícil de resolverlo.

Mi código como a continuación.

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

Answer 17

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

Encontré una solución al problema. El truco es usar la opción de activar 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);

});

Answer 18

Solo para decir que he tenido exactamente el mismo problema que tú, aunque solo apliqué JQuery a una tabla normal sin ningún 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.

Answer 19

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

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

Answer 20

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 tabla y establecer x-overflow parece haber solucionado este problema:

Answer 21

crea tu fixedheader dentro del "éxito" de tu llamada ajax, no tendrás 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);
}        

Answer 22

encontrar 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

Answer 23

Para cualquier persona que tenga problemas para ajustar el ancho de la tabla / celda con el plugin 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ía del html interno de la tabla se genera automáticamente.

Sin embargo, lo que sucede es que parte de tu celda puede ser más grande que el ancho almacenado dentro de las células thead.

Es decir, si su tabla tiene muchas columnas (tabla ancha) y sus filas tienen una gran cantidad de datos, llamar a "sWidth": cambiar el tamaño de la celda td no funcionará correctamente porque las filas secundarias están redimensionando automáticamente las td basadas en overflow contenido y esto sucede después de que la tabla se haya inicializado y haya pasado sus parámetros de inicialización.

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

Para arreglar esto, calculé el ancho del desbordamiento y lo contabilicé cambiando el tamaño de la tabla en consecuencia después de que la tabla se haya inicializado; mientras estamos en ello podemos iniciar nuestro encabezado fijo al mismo tiempo:

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

Answer 24

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

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

Answer 25

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