jQuery DataTables: ancho de la tabla de control
https://stackoverflow.com/questions/604933
-
03-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
Tengo un problema al controlar el ancho de una tabla con el complemento jQuery DataTables. Se supone que la tabla es el 100% del ancho del contenedor, pero termina siendo un ancho arbitrario, más bien que el ancho del contenedor.
Sugerencias apreciadas
La declaración de la tabla tiene este aspecto
<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, ve esto (tenga en cuenta el estilo añadido = " 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 se ha invalidado. No puedo ver de dónde viene esto
element.style {
width:0;}
-- dataTables.css (line 84
table.display {
margin:0 auto;
width:100%;
}
Solución
El problema se debe a que dataTable debe calcular su ancho, pero cuando se usa dentro de una pestaña, no está 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 se pueden usar juntas las tablas de datos con desplazamiento con jQuery UI pestañas (o incluso cualquier otro método por el cual la tabla es en un elemento oculto (mostrar: ninguno) cuando se inicializa). La razón esto requiere una consideración especial, es que cuando DataTables es Inicializado y está en un elemento oculto, el navegador no tiene Cualquier medida con la que se pueda dar DataTables, y esto requerirá en la desalineación de columnas cuando el desplazamiento está habilitado.
El método para solucionar esto es llamar a la API fnAdjustColumnSizing función. Esta función calculará los anchos de columna que son necesario 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 hace visible por primera vez hora. Para esto usamos el método 'show' proporcionado por las tablas de jQuery UI. Verificamos si el DataTable ha sido creado o no (tenga en cuenta el selector adicional para 'div.dataTables_scrollBody', esto se agrega cuando DataTable se inicializa). Si la tabla ha sido inicializada, nosotros re-dimensionalo Se podría agregar una optimización para redimensionar solo el Primera muestra de la mesa.
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 ] }
]
} );
} );
Consulte esto para obtener más información.
Otros consejos
Querrá modificar dos variables cuando inicialice dataTables: bAutoWidth y aoColumns.sWidth
Suponiendo que tienes 4 columnas con anchos de 50px, 100, 120px y 30px, harías:
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 dataTables 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.
Bueno, no estoy familiarizado con ese complemento, pero ¿podría restablecer el estilo después de agregar el datatable? Algo como
$("#querydatatablesets").css("width","100%")
después de la llamada a .dataTable?
jQuery('#querytableDatasets').dataTable({
"bAutoWidth": false
});
He tenido numerosos problemas con los anchos de columna de los 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 los datos como los 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 esto es el resultado de un error en jQdataTable. Lo que sucede es que si usas $ ('# 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%");
}
});
La configuración de anchos explícitamente utilizando sWidth para cada columna Y bAutoWidth: false en la inicialización de dataTable solucionó mi (similar) problema. Me encanta la pila desbordante.
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 cambiar todo, pero deje solo uno como nulo, para que pueda estirarse. Si pones ancho en TODO no funcionará. Espero haber ayudado a alguien hoy!
Agrega esta clase css a tu página, solucionará el problema:
#<your_table_id> {
width: inherit !important;
}
"fnInitComplete": function() {
$("#datatables4_wrapper").css("width","60%");
}
Esto funcionó bien para ajustar todo el ancho de la tabla. Gracias @Peter Drinnan!
Como en Datatable 10.1, esto es sencillo. Simplemente ponga el atributo de ancho a su tabla en HTML. es decir, width = " 100% " ;, esto anulará todos los estilos CSS establecidos por DT.
Consulte este 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 datos de datos no funcionó, por lo tanto, para la inicialización de los datos en la página de inicio. Mostrar opción.
He encontrado una solución al problema. El truco es 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 he tenido exactamente el mismo problema que tú, aunque acabo de aplicar 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 al colocar la tabla dentro de un DIV y, en su lugar, aplicar los efectos al DIV.
¿Estás haciendo esto en el evento listo?
$(document).ready(function() { ... });
Lo más probable es que el tamaño dependerá de que el documento esté completamente cargado.
Para cualquier persona que tenga problemas para ajustar el ancho de la tabla / celda con el complemento de encabezado fijo:
Datatables se basa en las etiquetas de thead para los parámetros de ancho de columna. Esto se debe a que realmente es 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 thead.
I.e. 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 están redimensionando automáticamente las td basadas en el desbordamiento contenido y esto sucede después de la tabla se ha inicializado y pasado sus parámetros de inicio.
Los parámetros originales de thead " sWidth " ;: se sobrescriben (se encogen) porque las tablas de datos creen que su tabla aún tiene su ancho predeterminado de% 100; no reconoce que algunas celdas estén desbordadas.
Para solucionar esto, calculé el ancho de desbordamiento y lo justifiqué cambiando el tamaño de la tabla en consecuencia después de que la tabla se ha inicializado. mismo tiempo:
$(document).ready(function() {
$('table').css('width', '120%');
new FixedHeader(dTable, {
"offsetTop": 40,
});
});
crea tu cabeza fija 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 contenedor. Haga de la envoltura de la mesa su contenedor después de que la mesa esté renderizada. Sé que esto podría no ser válido en los lugares donde tienes algo más junto con la tabla, pero luego siempre puedes adjuntar ese contenido.
Para mí, este problema surge si tienes una barra lateral y un contenedor que en realidad es un desplazamiento de esa barra lateral.
$(YourTableName+'_wrapper').addClass('mycontainer');
(Agregué un panel por defecto al panel)
Y tu 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>
Me encontré con un problema similar al tener un div envuelto alrededor de la mesa.
Agregando 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. Añadir un div alrededor de la tabla y configurar x-overflow parece haber solucionado este problema:
Asegúrese de que todos los demás parámetros antes de bAutoWidth & amp; aoColumns se ingresaron correctamente. Cualquier parámetro incorrecto antes romperá esta funcionalidad.
Tuve un problema similar y encontré que el texto en las columnas no se rompe y el uso de este código CSS solucionó 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' }
]
});
Me encuentro con el mismo problema hoy.
Usé una manera difícil de resolverlo.
Mi código como abajo.
$('#tabs').tabs({
activate: function (event, ui) {
//redraw the table when the tab is clicked
$('#tbl-Name').DataTable().draw();
}
});
Esto funciona bien.
#report_container {
float: right;
position: relative;
width: 100%;
}
