Search code examples
jqueryjsonajaxhtml-tabletablesorter

JQuery and Live Table Updates

I was wondering if anyone can point me in the direction of examples or sample code for a few things regarding table manipulation I'm trying to achieve but haven't been able to crack yet.

I currently have a table of data being produced that is sorted and displayed using Tablesorter plugin for Jquery.

I would like to add these extra bits of functionality

  1. Update the table automatically every few seconds with any new data (without refreshing the page) and maintain sorting. I can create the PHP script to output json for new data, but somehow i would need to send it the id of the last row displayed (so that i can find out what new rows to display)
  2. Once a new row is added (ideally with a smooth transition like fade) it would have a css class of "new" or something that will give it a new colour
  3. The new colour will then fade to the normal table style (remove class) within 15 seconds of the page maintaining focus
  4. if the page does not have focus and new data is there (i.e. refreshing in the background but user is looking at another window/tab) it waits until the user has focus on the window/tab and then carries out the fade to a normal colour as described in 3.

I hope this has been clear, the part i'm a bit sceptical about the most is point 4 with the focus issue, but I think facebook seem to do that with their Live news feed. It doesn't seem to update until i have the window in focus (or so i assume)

Any help and guidance would be greatly appreciated!

My table is in this form:

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

  • 1: To trigger an event every few seconds in JavaScript, use setTimeout(). Use the :last filter to help you grab that last row. Store the id in a hidden input field inside the last row.

    2: Last I tried, fades and roll-downs did not work well on table rows. I've had to create really ugly hacks to get this functionality to work such as creating a whole new <table> per row. Maybe things have improved in recent versions of jQuery? Check out Effects for a list of ways you can animate your content.

    3: You can implement this using callbacks just like with fades and roll-downs and other effects.

    4: I don't have experience with detecting window focus, though it does seem like there are resources out there that can help you with this. Here are a couple: http://www.webdeveloper.com/forum/archive/index.php/t-33457.html http://www.thefutureoftheweb.com/blog/detect-browser-window-focus