Atualizações de mesa e mesa ao vivo
-
06-07-2019 - |
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
- 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)
- 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
- 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
- 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>
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