Se corrigió el encabezado de la tabla en la parte superior de la ventana al desplazarse, salta / salta una fila. jQuery
Por favor mira mi jsFiddle He creado para replicar mi problema. http://jsfiddle.net/motocomdigital/22KFS/3/
En mi proyecto, he creado una tabla que se puede ordenar. he usado el clasificador de tablas jquery para hacer esto, que es un complemento jquery muy simple. El clasificador de tablas también se incluye en jsfidde. Si hace clic en los encabezados de la tabla, notará que ordena las columnas de la tabla de descendente a ascendente.
Esto está bien, el problema que tengo es...
En mi sitio web en vivo, la tabla tiene aproximadamente 125 filas de alto. Y quiero evitar a toda costa paginar la tabla.
Así que mi idea era arreglar el encabezado de la tabla al desplazarme con jQuery, que casi funciona. por favor mira mi violín. El jQuery que he usado para arreglar el encabezado en la parte superior de las páginas funciona.
El problema es que el encabezado de la tabla se vuelve fijo, la tabla se desplaza hacia arriba en una fila y se vuelve muy problemática.
¿Alguien puede ayudarme a eliminar la falla y evitar que se salte una fila cuando llegue a la parte superior de la ventana?
Realmente agradecería cualquier ayuda gracias.
Ver jsfiddle aquí http://jsfiddle.net/motocomdigital/22KFS/3/
jQuery
var $window = $(window),
$tableHead = $(".table-head"),
offset = $tableHead.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$tableHead.addClass('fixed');
} else {
$tableHead.removeClass('fixed');
}
});
CO
.fixed {
position: fixed;
top: 0;
}
HTML
<table id="table-sorter" width="400" border="0" cellspacing="0" cellpadding="10">
<thead>
<tr class="table-head">
<th width="100" height="18" valign="middle">Number</th>
<th width="100" height="18" valign="middle">First Name</th>
<th width="100" height="18" valign="middle">Surname</th>
<th width="100" height="18" valign="middle">System</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>Smith</td>
<td>Wordpress</td>
</tr>
... ...
</tbody>
</table>
preguntado el 09 de marzo de 12 a las 15:03
Joshc
1 Respuestas
Resuelto tu problema. En caso de que aún no se haya dado cuenta, la razón por la que salta es porque esencialmente está eliminando la fila del encabezado de la tabla cuando fija su posición, por lo que el resto de la tabla salta para llenar el espacio.
¿La solución? Bueno, está en debate. Para probar mi punto, todo lo que he hecho es agregar un nuevo encabezado temporal cuando arreglas el encabezado real. Esto mantiene la mesa en su lugar y permite que el encabezado se mueva hacia abajo. Cuando te desplazas hacia arriba, ese encabezado temporal se elimina.
Es esta la mejor manera? No estoy seguro, tal vez desee clonar el encabezado real como una solución temporal, en caso de fallas gráficas. Esto también significaría que en el caso de encabezados con varias líneas (por lo tanto, empujando la altura hacia abajo), el efecto se mantendría ya que está tomando un clon exacto.
De todos modos, vamos con el código: http://jsfiddle.net/chricholson/22KFS/5/
$("#table-sorter").tablesorter({
widgets: ['zebra']
});
var $window = $(window),
$tableHead = $(".table-head"),
offset = $tableHead.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$tableHead.addClass('fixed');
if ($('#table-sorter thead tr.temp').length <= 0){
$('#table-sorter thead').append('<tr class="temp"><td>hello</td></tr>');
}
} else {
$tableHead.removeClass('fixed');
$('tr.temp').remove();
}
});
Buena suerte
EDITAR
Aquí está el producto de trabajo usando clon() http://jsfiddle.net/chricholson/22KFS/8/
Código:
$("#table-sorter").tablesorter({
widgets: ['zebra']
});
var $window = $(window),
$tableHead = $(".table-head"),
offset = $tableHead.offset();
$window.scroll(function() {
if ($window.scrollTop() > offset.top) {
$tableHead.addClass('fixed');
if ($('#table-sorter thead tr.temp').length <= 0){
$tableHead.clone().appendTo('#table-sorter thead').removeClass('fixed').addClass('temp');
}
} else {
$tableHead.removeClass('fixed');
$('tr.temp').remove();
}
});
respondido 12 mar '12, 12:03
Eso es inteligente. No es mucho más suave porque los estilos como dijiste están un poco fuera de lugar, y parece que no puedo arreglarlo con css. Solo está desfasado por unos pocos píxeles. ¿Es realmente posible clonar cosas? Sería increíble si pudiera clonar el encabezado y la funcionalidad de clasificación funcionara. De esa manera no habría ningún movimiento de mesa. Gracias por tu ayuda :-) - jose
Tendrás que perdonarme, estoy en mi teléfono, así que no puedo darte el código completo. Ver aquí para jQuery clon api.jquery.com/clon. Creo que querrá clonar y luego eliminar y agregar una clase/identificación temporal, esto le permitirá eliminarlo más tarde: $tableHead.clone().removeClass('fixed').addClass('temp'); Esto debería clonarlo en el mismo lugar y cambiar la clase a temp. Use el mismo código de antes para eliminar. Como digo, estoy en mi teléfono, por lo que esto no está probado, es posible que deba cambiarlo ligeramente, use el enlace que le di para ayudar. - Chris
Gracias Chris, yo también estoy en el iPhone. Verificaré esto en unas horas y volveré a hacerlo. Soy bastante nuevo en javascript y jquery, pero no parece demasiado complicado. - jose
Hola Josh, acabo de probarlo con el clon: jsfiddle.net/chricholson/22KFS/8 Mi línea estaba un poco mal, debería ser $tableHead.clone().appendTo('#table-sorter thead').removeClass('fixed').addClass('temp'); También he agrandado el texto del encabezado para que pueda ver que funciona con alturas de formas extrañas y cosas por el estilo. - Chris
Impresionante, justo a tiempo también. Compruebo esto ahora. Gracias - jose
No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas jquery css css-position sticky tableheader or haz tu propia pregunta.
Recomiendo mirar biathlontime.com/2011-2012/ruhpolding/mujeres-individual — el complemento jquery que se usa allí es simplemente genial. - YuS