Mises à jour JQuery et Live Table

Question

Je me demandais si quelqu'un pouvait m'indiquer des exemples ou du code exemple pour quelques points concernant la manipulation de table que j'essayais d'obtenir mais que je n'avais pas encore réussi à résoudre.

Mon tableau de données en cours de production est actuellement trié et affiché à l'aide du plug-in Tablesorter pour Jquery.

Je voudrais ajouter ces fonctionnalités supplémentaires

1. Mettez à jour la table automatiquement toutes les quelques secondes avec les nouvelles données (sans actualiser la page) et conservez le tri. Je peux créer le script PHP permettant d’afficher json pour les nouvelles données, mais j’aurais besoin de l’envoyer l’identifiant de la dernière ligne affichée (pour que je puisse trouver quelles nouvelles lignes afficher)
2. Une fois qu'une nouvelle ligne est ajoutée (idéalement avec une transition douce comme un fondu), elle aurait une classe CSS de & "nouveau &"; ou quelque chose qui va lui donner une nouvelle couleur
3. La nouvelle couleur passera au style de tableau normal (remove class) dans les 15 secondes suivant le maintien de la mise au point sur la page
4. si la page n'a pas le focus et que de nouvelles données existent (rafraîchissement en arrière-plan mais l'utilisateur regarde une autre fenêtre / onglet), elle attend que l'utilisateur ait le focus sur la fenêtre / onglet et effectue ensuite le fondu à une couleur normale comme décrit dans la section 3.

J'espère que cela a été clair, la partie sur laquelle je suis un peu sceptique est le point 4 avec le problème central, mais je pense que Facebook semble le faire avec son fil d'actualité Live. Il ne semble pas mettre à jour jusqu'à ce que la fenêtre soit active (ou alors je suppose)

Toute aide et conseils seraient grandement appréciés!

Ma table est sous cette forme:

<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>

Answer 1

1: pour déclencher un événement toutes les quelques secondes en JavaScript, utilisez setTimeout() Utilisez le filtre :last pour vous aider à récupérer la dernière ligne. Enregistrez l'identifiant dans un champ de saisie masqué à l'intérieur de la dernière ligne.

2: Dernière tentative, les fondus et les déroulements ne fonctionnaient pas bien sur les lignes de la table. J'ai dû créer des hacks vraiment laids pour que cette fonctionnalité fonctionne, par exemple créer un tout nouveau <table> par ligne. Peut-être que les choses se sont améliorées dans les versions récentes de jQuery? Dans Effects , vous trouverez une liste de façons dont vous pouvez animer votre contenu.

3: Vous pouvez implémenter cela en utilisant des rappels, comme avec les fondus, les réductions et autres effets.

4: Je n'ai pas l'expérience de la détection du focus de fenêtre, bien qu'il semble qu'il existe des ressources pouvant vous aider. Voici un couple: http://www.webdeveloper.com/forum/archive/ index.php / t-33457.html http://www.thefutureoftheweb.com/blog/detect-browser-window- focus