jquery - example - Cabeceras fijas de DataTables desalineadas con columnas en tablas anchas

jquery table example

Question

Problema

Cuando se utiliza sScrollX , sScrollXInner y / o sScrollY para lograr una tabla de encabezado fija con su desplazamiento de contenido interno, los encabezados de la tabla no están alineados con el resto del cuerpo en Chrome e IE. Firefox, por otro lado, los muestra perfectamente.

Por lo que puedo decir, utilizando la versión 1.9.4, este problema solo ocurre cuando hay una gran cantidad de datos con anchos fluctuantes y con palabras que son muy largas / no ajustables combinadas en las mismas columnas que las pequeñas. Además, la tabla en cuestión debe ser bastante ancha.

Todos estos factores se demuestran en este fiddle :

Salida

Cromo:

ES DECIR:

Firefox

Las soluciones sugeridas

Estas soluciones se han sugerido anteriormente, pero no han tenido ningún efecto en mi implementación. Debido a algunas de estas sugerencias, instalé una demostración de vainilla simple y clara, ya que quería asegurarme de que ningún otro código contribuyera a este efecto.

• apagar / quitar todos mis css
• setTimeout( function () { oTable.fnAdjustColumnSizing(); }, 10 );
• llamando a oTable.fnFilter( "x",0 ) y oTable.fnFilter( "",0 ) en ese orden
• "sScrollXInner": "100%"
• deshacerse de todos los anchos

La única solución que encontré para los encabezados desalineados fue eliminar sScrollX y sScrollY , pero esto no se puede contar como una solución ya que se pierde la funcionalidad de desplazamiento del encabezado fijo / contenido interno. Así que, lamentablemente, es un truco temporal, no una solución!

Nota

Para editar / jugar con el último fiddle .

He probado varias combinaciones que se pueden observar en el historial de revisiones del violín usando el enlace http://jsfiddle.net/pratik136/etL73/#REV# donde 1 <= #REV# <= 12

Historia

StackO
Esta pregunta se ha hecho antes: el encabezado jQuery Datatables no está alineado con el desplazamiento vertical
pero la diferencia vital es que el OP de esa pregunta mencionó que podían solucionar el problema si se eliminaba todo el CSS, lo cual no es cierto en mi caso, y he intentado algunas permutaciones, por lo que consideré que la pregunta es digna de un repost.

Externo
Este problema también se ha marcado en el foro de DataTables:

• http://datatables.net/forums/discussion/7395/sscrolly-and-sscrollx-broken/p1
• http://datatables.net/forums/discussion/7778/vertical-scrolling-messes-up-column-header-alignment#Item_1
• http://datatables.net/forums/discussion/3835/width-columns-problem-in-chrome-safari/p1
• Mi informe de errores: http://datatables.net/forums/discussion/12491/datatables-header-alignment-issue-refresh#Item_1

¡Este tema me ha vuelto loco! Por favor contribuya sus pensamientos!

Answer 1

Añadir table-layout: fixed al estilo de su tabla (css o atributo de estilo).

El navegador dejará de aplicar su algoritmo personalizado para resolver restricciones de tamaño.

Busque en la web información sobre cómo manejar los anchos de columna en un diseño de tabla fijo (aquí hay 2 preguntas simples de SO: here y here )

Obviamente: el inconveniente será que el ancho de sus columnas no se adaptará a su contenido.

[Editar] Mi respuesta funcionó cuando usé el plugin FixedHeader, pero una publicación en el foro del datatable parece indicar que surgen otros problemas al usar la opción sScrollX :

bAutoWidth y sWidth se ignoran cuando se establece sScrollX (v1.7.5)

Intentaré encontrar una manera de evitar esto.

Answer 2

Añadir estas dos líneas solucionó este problema para mí

"responsive": true,
"bAutoWidth": true

Ahora hay un complemento de respuesta disponible: https://datatables.net/extensions/responsive/ . Sin embargo, en mi experiencia he encontrado que todavía hay algunos errores. Sigue siendo la mejor solución que he encontrado hasta ahora.

Answer 3

Acabo de descubrir una manera de solucionar el problema de alineación. Cambiar el ancho de div que contiene el encabezado estático corregirá su alineación. El ancho óptimo que encontré es del 98%. Por favor, consulte el código.

El div generado automáticamente:

<div class="dataTables_scrollHead" style="overflow: hidden; position: relative; border: 0px none; width: 100%;">

El ancho aquí es del 100%, cámbielo al 98% al inicializar y volver a cargar la tabla de datos.

jQuery(''#dashboard'').dataTable({
"sEcho": "1",
"aaSorting": [[aasortvalue, ''desc'']],
"bServerSide": true,
"sAjaxSource": "NF.do?method=loadData&Table=dashboardReport",
"bProcessing": true,
"sPaginationType": "full_numbers",
"sDom": "lrtip", // Add ''f'' to add back in filtering
"bJQueryUI": false,
"sScrollX": "100%",
"sScrollY": "450px",
"iDisplayLength": ''<%=recordCount%>'',
"bScrollCollapse": true,
"bScrollAutoCss": true,
"fnInitComplete": function () {
jQuery(''.dataTables_scrollHead'').css(''width'', ''98%''); //changing the width
},
"fnDrawCallback": function () {
jQuery(''.dataTables_scrollHead'').css(''width'', ''98%'');//changing the width
}
});

Answer 4

Activa la función de búsqueda de DataTable después de inicializar DataTable con una cadena en blanco. Se ajustará automáticamente la desalineación de thead con tbody .

$( document ).ready(function()
{
$(''#monitor_data_voyage'').DataTable( {
scrollY:150,
bSort:false,
bPaginate:false,
sScrollX: "100%",
scrollX: true,
} );
setTimeout( function(){
$(''#monitor_data_voyage'').DataTable().search( '''' ).draw();
}, 10 );
});

Answer 5

EDITAR: ver el último Fiddle con "encabezado fijo":

El Fiddle .

Una de las soluciones es implementar el desplazamiento por usted mismo en lugar de dejar que el complemento DataTables lo haga por usted.

Tomé tu ejemplo y comenté la opción sScrollX. Cuando esta opción no esté presente, el complemento DataTables simplemente colocará su tabla como está en un div contenedor. Por lo tanto, esta tabla se extenderá fuera de la pantalla para arreglar que podamos colocarla en un div con el ancho requerido y un conjunto de propiedades de desbordamiento. Esto es exactamente lo que hace la última declaración jQuery: envuelve la tabla existente en un div de 300px de ancho. Probablemente no necesite establecer el ancho en el div de envoltura (300px en este ejemplo), lo tengo aquí para que el efecto de recorte sea fácilmente visible. Y sea amable, no olvide reemplazar ese estilo en línea con una clase.

$(document).ready(function() {
var stdTable1 = $(".standard-grid1").dataTable({
"iDisplayLength": -1,
"bPaginate": true,
"iCookieDuration": 60,
"bStateSave": false,
"bAutoWidth": false,
//true
"bScrollAutoCss": true,
"bProcessing": true,
"bRetrieve": true,
"bJQueryUI": true,
//"sDom": ''t'',
"sDom": ''<"H"CTrf>t<"F"lip>'',
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
//"sScrollY": "500px",
//"sScrollX": "100%",
"sScrollXInner": "110%",
"fnInitComplete": function() {
this.css("visibility", "visible");
}
});
var tableId = ''PeopleIndexTable'';
$(''<div style="width: 300px; overflow: auto"></div>'').append($(''#'' + tableId)).insertAfter($(''#'' + tableId + ''_wrapper div'').first())});

Answer 6

El siguiente código funcionó. Corregido el problema en IE 9.0 al menos. Espero que esto ayude

var oTable = $(''#tblList'').dataTable({
"sScrollY": "320px",
"bScrollCollapse": true,
});
setTimeout(function(){
oTable.fnAdjustColumnSizing();
},10);

Answer 7

En lugar de usar sScrollX, sScrollY usa un estilo div separado

.scrollStyle
{
height:200px;overflow-x:auto;overflow-y:scroll;
}

Añadir a continuación después de la llamada de datos en script

 jQuery(''.dataTable'').wrap(''<div class="scrollStyle" />'');

Está funcionando perfectamente después de muchos intentos.

Answer 8

Estoy teniendo el mismo problema en IE9.

Solo usaré un RegExp para eliminar todos los espacios en blanco antes de escribir el HTML en la página.

var Tables=$(''##table_ID'').html();
var expr = new RegExp(''>[ /t/r/n/v/f]*<'', ''g'');
Tables= Tables.replace(expr, ''><'');
$(''##table_ID'').html(Tables);
oTable = $(''##table_ID'').dataTable( {
"bPaginate": false,
"bLengthChange": false,
"bFilter": false,
"bSort": true,
"bInfo": true,
"bAutoWidth": false,
"sScrollY": ($(window).height() - 320),
"sScrollX": "100%",
"iDisplayLength":-1,
"sDom": ''rt<"bottom"i flp>''
} );

Answer 9

He arreglado la columna problema bu usando el siguiente concepto

$(".panel-title a").click(function(){
setTimeout( function(){
$(''#tblSValidationFilerGrid'').DataTable().search( '''' ).draw();
}, 10 );
})

Answer 10

Intenta esto, el siguiente código solucionó mi problema

table.dataTable tbody th,table.dataTable tbody td
{
white-space: nowrap;
} 

para más información por favor refiérase Here .

Answer 11

La siguiente es una forma de lograr una tabla de encabezado fija, no sé si será suficiente para su propósito. Los cambios son:

1. use "bScrollCollapse" en lugar de "sScrollXInner"
2. no use fieldset para envolver la tabla
3. añadir una clase css "div.box"

Parece que funciona completamente en mi máquina local, pero no funciona completamente usando Fiddle. Parece que Fiddle agrega un archivo css (normalize.css) que de alguna manera rompió el plugin css (estoy bastante seguro de que también puedo hacer que funcione completamente en Fiddle agregando algunas reglas claras de css, pero no tengo tiempo para investigar más ahora)

Mi fragmento de código de trabajo está abajo. Espero que esto pueda ayudar.

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type=''text/javascript'' src=''http://code.jquery.com/jquery-1.8.2.js''></script>
<script type=''text/javascript'' src="http://datatables.net/release-datatables/media/js/jquery.dataTables.min.js"></script>
<style type=''text/css''>
div.box {
height: 100px;
padding: 10px;
overflow: auto;
border: 1px solid #8080FF;
background-color: #E5E5FF;
}
.standard-grid1, .standard-grid1 td, .standard-grid1 th {
border: solid black thin;
}
</style>
<script type=''text/javascript''>
$(window).load(function(){
$(document).ready(function() {
var stdTable1 = $(".standard-grid1").dataTable({
"iDisplayLength": -1,
"bPaginate": true,
"iCookieDuration": 60,
"bStateSave": false,
"bAutoWidth": false,
//true
"bScrollAutoCss": true,
"bProcessing": true,
"bRetrieve": true,
"bJQueryUI": true,
"sDom": ''<"H"CTrf>t<"F"lip>'',
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
"sScrollX": "100%",
//"sScrollXInner": "110%",
"bScrollCollapse": true,
"fnInitComplete": function() {
this.css("visibility", "visible");
}
});
});
});
</script>
</head>
<body>
<div>
<table class="standard-grid1 full-width content-scrollable" id="PeopleIndexTable">
<thead>
<!-- put your table header HTML here -->
</thead>
<tbody>
<!-- put your table body HTML here -->
</tbody>
</table>
</div>
</body>
</html>

Answer 12

Para los usuarios de bootstrap, esto lo solucionó para mí:

 $($.fn.dataTable.tables(true)).DataTable()
.columns.adjust()
.fixedColumns().relayout();

Ver articulo here

Answer 13

Recientemente tuve el mismo problema y todavía estaba buscando la solución cuando probé algo en mi css, verifique si estoy agregando a sus celdas (th y td)

-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
-sizing: content-box;

resolverá este problema; Para mí, estaba usando un marco html / css que estaba agregando el valor border-box en cada elemento.

Answer 14

Sé que ya se ha marcado una respuesta, pero para alguien con problemas similares, lo anterior no funciona. Lo estoy usando junto con el tema bootstrap.

Hay una línea que se puede modificar en el archivo dataTables.fixedHeader.js. El diseño predeterminado de la función se ve como sigue.

 _matchWidths: function (from, to) {
var get = function (name) {
return $(name, from)
.map(function () {
return $(this).width();
}).toArray();
};
var set = function (name, toWidths) {
$(name, to).each(function (i) {
$(this).css({
width: toWidths[i],
minWidth: toWidths[i]
});
});
};
var thWidths = get(''th'');
var tdWidths = get(''td'');
set(''th'', thWidths);
set(''td'', tdWidths);
},

cambiar el

 return $(this).width();

a

 return $(this).outerWidth();

outerWidth () es una función que está contenida en jquery.dimensions.js si está utilizando una versión más nueva de jquery. es decir. jquery-3.1.1.js

lo que hace la función anterior es que asigna el th de la tabla original, luego los aplica a la tabla "clonada" (encabezado fijo). en mi caso, siempre estaban apagados entre 5px y 8px cuando estaban desalineados. Lo más probable es que no sea la mejor solución, pero proporciona una solución para todas las demás tablas de la solución sin tener que especificarla por declaración de tabla. Hasta ahora solo se ha probado en Chrome, pero debería proporcionar una solución de adjudicación en todos los navegadores.

Answer 15

Si quieres usar scrollY usa:

$ (''. DataTables_sort_wrapper''). Trigger ("click");

Answer 16

Solucioné el mismo problema en mi aplicación agregando el siguiente código en el css:

.dataTables_scrollHeadInner
{
width: 640px !important;
}

Answer 17

Tuve el mismo problema y este código lo resuelve. Obtuve esta solución de este artículo, pero tuve que ajustar el tiempo en el intervalo para que funcione.

setTimeout(function(){
oTable.fnAdjustColumnSizing();
},50);

Answer 18

Tuve este mismo problema y vi muchas respuestas complicadas que nunca parecieron funcionar. Lo resolví simplemente anulando el CSS (site.css) en lo siguiente y lo arreglé en Chrome, IE y Firefox:

table.display td {
padding: 0px 5px;
}
/* this is needed for IE and Firefox if using horizontal scroll*/
table{
max-width: none;
min-height: 0%;
}

Esto anula el CSS en datatable.jui.css

Answer 19

prueba esto

esto me funciona ... agregué el css para mi solución y funcionó ... aunque no cambié nada en css con datos excepto en {border-collapse: separado;}

.dataTables_scrollHeadInner { /*for positioning header when scrolling is applied*/
padding:0% ! important
}