Establecer el recuento máximo de filas visualizadas para la tabla HTML

Tener página JSP con tabla HTML generada dinámicamente con un número desconocido de filas.Establecer el recuento máximo de filas visualizadas para la tabla HTML

Tiene una propiedad en el back-end, que establece el número máximo de filas, por ejemplo: max_rows = 15.

Cómo limitar el número de filas para la tabla HTML a valor max_rows? Otra parte de la tabla debe ser accesible mediante desplazamiento vertical, significa que el usuario ve 15 filas y si se desplaza hacia abajo, verá otras filas de la tabla.

Se puede hacer empíricamente calculando la altura media de la fila y usando la propiedad de altura máxima para div-wrapper, pero creo que este enfoque no es muy estable.

Por lo tanto, es necesario contar con el recuento de filas. ¿Tal vez hay un complemento para este caso o es una solución CSS o HTML estándar?

Fuente

2010-01-22 sergionni

Parte de la información adicional que haría útil, se trata de una página generada dinámicamente, si es así lo marco, lo que la fuente de datos? También te refieres al límite sin desplazamiento, ¿qué debería pasar cuando tienes más filas que eso? –

gracias por la notación, he editado la publicación para que sea más claro – sergionni

Esto se puede hacer con HTML estándar, CSS y un poco de javascript. Se puede hacer que se degrade con gracia para los clientes con javascript desactivado también. Con eso quiero decir, simplemente verán la tabla original, sin modificaciones por las barras de desplazamiento. Intentar algo como esto:

<html> 
<head> 
    <style type="text/css"> 
     table { 
      width: 100%; 
      border-collapse: collapse; 
     } 
     td { 
      border: 1px solid black; 
     } 
     .scrollingTable { 
      width: 30em; 
      overflow-y: auto; 
     } 
    </style> 
    <script type="text/javascript"> 
     function makeTableScroll() { 
      // Constant retrieved from server-side via JSP 
      var maxRows = 4; 

      var table = document.getElementById('myTable'); 
      var wrapper = table.parentNode; 
      var rowsInTable = table.rows.length; 
      var height = 0; 
      if (rowsInTable > maxRows) { 
       for (var i = 0; i < maxRows; i++) { 
        height += table.rows[i].clientHeight; 
       } 
       wrapper.style.height = height + "px"; 
      } 
     } 
    </script> 
</head> 
<body onload="makeTableScroll();"> 
    <div class="scrollingTable"> 
     <table id="myTable"> 
      <tr> 
       <td>blah blah</td> 
       <td>blah blah</td> 
       <td>blah blah</td> 
       <td>blah blah</td> 
      </tr> 
      <tr> 
       <td>Here is some long text that should wrap: blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</td> 
       <td>blah blah</td> 
       <td>blah blah</td> 
       <td>blah blah</td> 
      </tr> 
      <tr> 
       <td>blah</td> 
       <td>blah</td> 
       <td>blah</td> 
       <td>blah</td> 
      </tr> 
      <tr> 
       <td>blah blah</td> 
       <td>blah blah</td> 
       <td>blah blah</td> 
       <td>blah blah</td> 
      </tr> 
      <tr> 
       <td>blah blah</td> 
       <td>blah blah</td> 
       <td>blah blah</td> 
       <td>blah blah</td> 
      </tr> 
      <tr> 
       <td>blah blah</td> 
       <td>blah blah</td> 
       <td>blah blah</td> 
       <td>blah blah</td> 
      </tr> 
      <tr> 
       <td>blah</td> 
       <td>blah</td> 
       <td>blah</td> 
       <td>blah</td> 
      </tr> 
     </table> 
    </div> 
</body> 
</html>

Esto fue probado en Firefox, Chrome e IE 7, pero debería funcionar todos los navegadores modernos. Tenga en cuenta que no importa qué tan alto sea el contenido de cada fila, ni cuánto espacio tenga cada celda. Si no desea usar border-collapse: colapso en su tabla, tendrá que agregar código en el ciclo for para tener en cuenta el espacio de las celdas.

Si tiene fronteras más gruesas, a continuación, reemplazar la función JavaScript con éste:

function makeTableScroll() { 
    // Constant retrieved from server-side via JSP 
    var maxRows = 4; 

    var table = document.getElementById('myTable'); 
    var wrapper = table.parentNode; 
    var rowsInTable = table.rows.length; 
    try { 
     var border = getComputedStyle(table.rows[0].cells[0], '').getPropertyValue('border-top-width'); 
     border = border.replace('px', '') * 1; 
    } catch (e) { 
     var border = table.rows[0].cells[0].currentStyle.borderWidth; 
     border = (border.replace('px', '') * 1)/2; 
    } 
    var height = 0; 
    if (rowsInTable > maxRows) { 
     for (var i = 0; i < maxRows; i++) { 
      height += table.rows[i].clientHeight + border; 
     } 
     wrapper.style.height = height + "px"; 
    } 
}

El try/catch allí maneja las diferencias entre IE y otros navegadores. El código en la captura es para IE.

Fuente

2010-01-23 18:37:43 DaveS

parece prometedor, voy a escribir comentarios tan pronto probar esta solución para mi caso – sergionni

funciona bien, gracias por la ayuda – sergionni

Esto es un poco más tarde, pero por favor, compruebe mi respuesta. ¡Encontré una manera de hacerlo sin javascript! – rarrarrarrr

Coloque su tabla en un bloque div y use CSS para especificar la altura y la propiedad de desbordamiento del div.

<style type="text/css"> 
.table_outer { height: 15em; overflow: auto; } 
</style> 

<div class="table_outer"> 
    <table> 
    ...table content... 
    </table> 
</div>

De esta manera el div tiene una altura fija y el navegador va a añadir una barra de desplazamiento cuando el contenido del bloque div es demasiado alto.

He establecido la altura en 15em, que corresponde con 15 * font-height. Al usar bordes, rellenos y cosas, esta altura es incorrecta. Pero se puede calcular de manera más adecuada (en px) para su diseño.

Fuente

2010-01-22 13:57:06 Veger

Oh, no te vi, ya pensaste en esto. Aunque I * do * creo que es estable y es compatible con la mayoría de los navegadores. – Veger

Sí, es estable, pero me temo que la altura de la columna puede variar debido a la longitud del texto, y puede causar cierta inexactitud. – sergionni

De hecho. Puede usar JavaScript para encontrar el alto de las primeras 15 filas, agregar estos valores, modificar la altura de div. Pero esto suena muy * * inestable para mí ... – Veger

No hay forma de hacer esto solo con CSS y HTML, también necesitas javascript. Obtenga la altura de las 15 filas superiores y limite la altura de un div de envoltura a esa altura. Establecer desbordamiento: automático en el div para obtener sus barras de desplazamiento.

No olvide establecer una altura predeterminada en el div como una alternativa si javascript está desactivado.

Fuente

2010-01-22 16:35:59

Editar: Esto realmente no resuelve el problema propuesto. Me perdí la parte en la pregunta que el usuario necesita para poder desplazarse para ver el resto de las filas. Whoops. Entonces, supongo que js es realmente necesario.

En realidad, esto se puede hacer sin javascript. El truco está utilizando nth-child(x): se necesita

table { 
    border-collapse: collapse; 
} 

tr:nth-child(n + 4) { 
    visibility: hidden; 
}

El borde del colapso por lo que la frontera no se extiende más allá de las filas ocultas.

Aquí está la fiddle.

Fuente

2015-03-07 20:14:31 rarrarrarrr

forma interesante – sergionni

también se puede utilizar display: none en lugar de visibilidad: oculto si looping una mesa para ahorrar espacio – rai

Cuando llegan nuevos datos, después de que el cuarto hijo. ¿Lo que pasa? ¿Puedes actualizar los datos del primer hijo con los datos entrantes? – Jesse

Usted puede utilizar la función de slice:

$('table tbody > tr').slice(1,5).hide();

Fuente

2017-10-11 20:21:28 user8761489

Establecer el recuento máximo de filas visualizadas para la tabla HTML

Respuesta

Cuestiones relacionadas