Pergunta

Eu queria saber se alguém pode me apontar na direção de exemplos ou código de amostra para algumas coisas sobre a manipulação da tabela que estou tentando alcançar, mas ainda não consegui quebrar.

Atualmente, tenho uma tabela de dados que estão sendo classificados e exibidos usando TableSorter plugin para jQuery.

Eu gostaria de adicionar esses pedaços extras de funcionalidade

  1. Atualize a tabela automaticamente a cada poucos segundos com novos dados (sem atualizar a página) e manter a classificação. Posso criar o script PHP para gerar JSON para novos dados, mas de alguma forma eu precisaria enviá -lo o ID da última linha exibido (para que eu possa descobrir quais novas linhas exibirem)
  2. Uma vez que uma nova linha é adicionada (idealmente com uma transição suave como o Fade), ela teria uma classe CSS de "novo" ou algo que dará uma nova cor
  3. A nova cor então desaparecerá para o estilo de tabela normal (Remova a classe) dentro de 15 segundos da página mantendo o foco
  4. Se a página não tiver foco e novos dados estão lá (ou seja, refrescante em segundo plano, mas o usuário está olhando para outra janela/guia), ele aguarda até que o usuário tenha foco na janela/guia e depois realize o desbotamento para uma cor normal conforme descrito em 3.

Espero que tenha ficado claro, a parte que estou um pouco cética sobre o ponto mais é o ponto 4 com a questão do foco, mas acho que o Facebook parece fazer isso com seu feed de notícias ao vivo. Não parece atualizar até que eu tenha a janela em foco (ou assim eu presumo)

Qualquer ajuda e orientação seriam muito apreciadas!

Minha mesa está nesta 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>
Foi útil?

Solução

1: Para acionar um evento a cada poucos segundos em JavaScript, use setTimeout(). Use o :last Filtre para ajudá -lo a pegar a última linha. Armazene o ID em um campo de entrada oculto dentro da última linha.

2: Por último, tentei, desapareceu e os rolos não funcionaram bem em linhas de mesa. Eu tive que criar hacks realmente feios para fazer com que essa funcionalidade funcione, como criar um novo <table> por linha. Talvez as coisas tenham melhorado nas versões recentes do jQuery? Verificação de saída Efeitos Para uma lista de maneiras de animar seu conteúdo.

3: Você pode implementar isso usando retornos de chamada, assim como com desbotamentos e roll-downs e outros efeitos.

4: Não tenho experiência em detectar o foco da janela, embora pareça que haja recursos por aí que possam ajudá -lo com isso. Aqui estão um casal:http://www.webdeveloper.com/forum/archive/index.php/t-33457.html http://www.thefutureoftheweb.com/blog/detect-browser-window-focus

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top