2009-11-28 111 views
0

我想知道是否有人可以指向我的示例或示例代碼的方向有關表操作我試圖實現但尚未能夠破解的一些事情。JQuery和實時表更新

我目前有一個正在生成的數據表,使用Tablesorter插件爲Jquery排序和顯示。

我想補充的功能

  1. Update自動錶與任何新的數據每隔幾秒鐘,這些額外的位(而無需刷新頁面),並維持整理。我可以創建PHP腳本來爲新數據輸出json,但不知怎的,我需要發送最後一行顯示的ID(以便我可以找出要顯示的新行)
  2. 一旦添加了新行(理想情況下平滑過渡像淡出)它將有一個css類的「新」或東西,會給它一個新的顏色
  3. 新的顏色然後會淡出到正常的表格樣式(刪除類)在15秒如果頁面沒有焦點並且有新數據(例如,在後臺刷新,但用戶正在查看另一個窗口/標籤頁),則等待用戶聚焦在窗口/標籤頁上,然後攜帶如3中所述,將淡入淡出爲正常顏色。

我希望這已經很清楚了,對於最重要的一點我有點懷疑是關注焦點問題的第4點,但我認爲Facebook似乎是用他們的Live新聞Feed來做到這一點。它似乎並沒有更新,直到我有窗口焦點(或所以我認爲)

任何幫助和指導將不勝感激!

我的表是這樣的形式:

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

回答

2

1:觸發一個事件在JavaScript中每隔幾秒鐘,使用setTimeout()。使用:last過濾器可幫助您抓取最後一行。將ID存儲在最後一行內的隱藏輸入字段中。

2:上次我嘗試過,淡入淡出和滾降在表格行上效果不佳。我必須創建非常難看的黑客才能使此功能起作用,例如每行創建一個全新的<table>。最近版本的jQuery中可能有所改進?查看Effects,查看可以爲內容添加動畫的方式列表。

3:您可以像使用淡入淡出和其他效果一樣使用回調來實現此功能。

4:我沒有檢測窗口焦點的經驗,雖然它似乎有資源可以幫助你做到這一點。這裏有幾個: http://www.webdeveloper.com/forum/archive/index.php/t-33457.html http://www.thefutureoftheweb.com/blog/detect-browser-window-focus

+0

您應該能夠使用'$ .animate'方法來改變背景顏色或相關行,例如http://docs.jquery.com/Effects/animate – 2009-11-28 18:48:59