jQuery DataTables: ancho de la tabla de control

Question

Tengo un problema al 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 apreciados

La declaración de tabla es el siguiente

<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 
    }); 
}); ` 

Inspección del HTML en Firebug, verá este (tenga en cuenta el estilo añadido = "width : 0px; ")

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

Al buscar Firebug en los estilos, el estilo table.display ha sido anulado. No se puede ver dónde está viniendo de

element.style { 
    width:0;}  

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

Answer 1

El problema está causado porque dataTable debe calcular su ancho - pero cuando se utiliza dentro de una pestaña, que no es visible, por lo tanto, no puede calcular las anchuras. La solución es llamar a 'fnAdjustColumnSizing' cuando se muestra la pestaña.

Preámbulo

Este ejemplo muestra cómo DataTables con desplazamiento se pueden utilizar juntos con pestañas jQuery interfaz de usuario (o de hecho cualquier otro método por el que la mesa es en un oculto (display: elemento ninguno) cuando está inicializado). El motivo requiere una consideración especial, cuando DataTables es inicializado 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 las columnas al desplazarse está habilitado.

El método para evitar esto es llamar a la función fnAdjustColumnSizing API . Esta función calculará los anchos de columna que son 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 durante el primer tiempo . Para esto, usamos el método 'show' provisto por las tablas jQuery UI. Comprobamos si el DataTable se ha creado o no (observe el selector adicional para 'div.dataTables_scrollBody', esto se agrega cuando se inicializa el DataTable). Si la tabla se ha inicializado, la cambiamos de tamaño. Se podría agregar una optimización para cambiar el tamaño 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 ] } 
     ] 
    }); 
}); 

Ver this para obtener más información.

Answer 2

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

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

después de la llamada de .dataTable?

Answer 3

¿Estás haciendo esto en el evento preparado?

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

El dimensionamiento es más probable que va a ser dependiente de documento que se va a plena carga.

Answer 4

Usted querrá ajustar dos variables al inicializar tablas de datos: bAutoWidth y aoColumns.sWidth

suponiendo que tiene 4 columnas con anchuras de 50 px, 100, 120 píxeles y 30 píxeles puede hacer:

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 tablas de datos en http://datatables.net/usage

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

Answer 5

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

Answer 6

Solo para decir que he tenido exactamente el mismo problema que tú, aunque solo he aplicado 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 7

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

Posición de adición: relative fixed it for me.

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

Answer 8

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

Answer 9

Tuve un problema similar cuando el contenido de la tabla era más grande que el encabezado y el pie de página de la tabla. La adición de un div alrededor de la mesa y el establecimiento de x-desbordamiento parece haberse solucionado este problema:

Answer 10

Asegúrese de que todos los parámetros de los demás antes de bAutoWidth & aoColumns son correctamente parámetro incorrecto entered.Any antes se romperá esta funcionalidad.

Answer 11

usted tiene 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"}] 
}); 

Usted puede cambiar todo, pero dejar sólo una como nulo, por lo que se puede estirar. Si pone anchos en TODO, no funcionará. ¡Espero haber ayudado a alguien hoy!

Answer 12

Esto funciona bien.

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

Answer 13

Para cualquier persona que tenga problemas para ajustar el ancho de la tabla/célula usando el plugin cabecera fija:

tablas de datos se basa en 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 su celda puede ser más grande que el ancho almacenado dentro de las celdas de thead.

I.e. 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 contenido desbordado y esto sucede después de la tabla se ha inicializado y ha pasado sus parámetros init.

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 solucionar esto me di cuenta de la anchura de desbordamiento y se representaron cambiando el tamaño de la tabla en consecuencia después de la tabla se ha inicializado - ya que estamos en ella podemos init nuestra cabecera fija al mismo tiempo:

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

Answer 14

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 usted ha declarado que las tablas de datos como los siguientes:

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

entonces la línea css magia iría en la clase Loadtable

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

}

Answer 15

que tenía el mismo problema y encontré ese texto en las columnas no se rompe y con este código CSS resuelto el problema

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

Answer 16

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í es 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 17

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

Esto funcionó bien para ajustar toda la anchura de la tabla. Gracias @ Peter Drinnan!

Answer 18

Ninguna de las soluciones aquí funcionó para mí. Incluso el ejemplo en el datatables homepage 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 está en utilice la opción Activar para las pestañas y para fnAdjustColumnSizing llamada() en la tabla visibles:

$(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 19

Como 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.

ver este http://www.datatables.net/examples/basic_init/flexible_width.html

Answer 20

crear su FixedHeader dentro del "éxito" de la llamada Ajax, que no tendrá ningún problema de alineación en el encabezado y filas.

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

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

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

Answer 21

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 22

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

No guarde la 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 tiene una barra lateral y un contenedor que es realmente un desplazamiento de esa barra lateral.

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

(que añade un panel del panel predeterminada)
Y tu clase:

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

Answer 23

Añadir esta clase CSS a la página, se solucionará el problema:

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

Answer 24

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> 

Datatables force width table

Answer 25

me encuentro con el mismo problema hoy en día.

Utilicé una forma complicada 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(); 
    } 
});