Pregunta

Me preguntaba si alguien puede señalarme en la dirección de ejemplos o código de muestra para algunas cosas con respecto a la manipulación de tablas que estoy tratando de lograr, pero aún no he podido descifrar.

Actualmente tengo una tabla de datos en producción que se clasifica y muestra usando el complemento Tablesorter para Jquery.

Me gustaría agregar estos bits adicionales de funcionalidad

  1. Actualice la tabla automáticamente cada pocos segundos con cualquier dato nuevo (sin actualizar la página) y mantenga la clasificación. Puedo crear el script PHP para generar json para nuevos datos, pero de alguna manera necesitaría enviarle la identificación de la última fila mostrada (para que pueda averiguar qué nuevas filas mostrar)
  2. Una vez que se agrega una nueva fila (idealmente con una transición suave como el desvanecimiento) tendría una clase css de " new " o algo que le dará un nuevo color
  3. El nuevo color se desvanecerá al estilo de tabla normal (eliminar clase) dentro de los 15 segundos de la página manteniendo el foco
  4. si la página no tiene foco y hay nuevos datos allí (es decir, se actualiza en segundo plano pero el usuario está mirando otra ventana / pestaña) espera hasta que el usuario se haya enfocado en la ventana / pestaña y luego realiza el desvanecimiento para un color normal como se describe en 3.

Espero que esto haya quedado claro, la parte de la que estoy un poco escéptico es el punto 4 con el tema central, pero creo que Facebook parece hacer eso con sus noticias en vivo. No parece actualizarse hasta que tenga la ventana enfocada (o eso supongo)

¡Cualquier ayuda y orientación sería muy apreciada!

Mi tabla tiene esta forma:

<table class="tablesorter" cellspacing="1"> 
    <thead> 
    <tr> 
        <th>ID</th> 
        <th>lid</th> 
        <th>Time</th> 
        <th>Season</th> 
        <th>Keyword</th> 
        <th>Campaign</th> 
        <th>IP</th>         
    </tr> 
    </thead> 
    <tbody> 
        <tr> 
            <td class="id">6875</td> 
            <td class="lid">-----</td> 
            <td class="time">28 Nov 09 16:35:24</td> 
            <td class="season">xxx xxx</td> 
            <td class="keyword">xx xx xxxx</td> 
            <td class="campaign">xxx</td> 
            <td class="ip">xx.xx.xx.xx</td> 
        </tr>
    <tbody> 
<table>
¿Fue útil?

Solución

1: para activar un evento cada pocos segundos en JavaScript, use setTimeout() . Use el filtro :last para ayudarlo a tomar esa última fila. Almacene la identificación en un campo de entrada oculto dentro de la última fila.

2: La última vez que lo intenté, los fundidos y los retrocesos no funcionaron bien en las filas de la tabla. He tenido que crear hacks realmente feos para que esta funcionalidad funcione, como crear un nuevo <table> por fila. ¿Quizás las cosas han mejorado en las versiones recientes de jQuery? Consulte Efectos para obtener una lista de las formas en que puede animar su contenido.

3: puede implementar esto utilizando devoluciones de llamada al igual que con desvanecimientos y retrocesos y otros efectos.

4: No tengo experiencia en detectar el foco de la ventana, aunque parece que hay recursos disponibles que pueden ayudarlo con esto. Aquí hay una pareja: http://www.webdeveloper.com/forum/archive/ index.php / t-33457.html http://www.thefutureoftheweb.com/blog/detect-browser-window- enfoque

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top