Hiya i was wondering if anyone can point me in the direction of examples or sample code for a few things regarding table minipulation i'm trying to achive 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
- 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)
- 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
- The new colour will then fade to the normal table style (remove class) within 15seconds of the page maintaining focus
- 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>