JQuery和Live Table更新
-
06-07-2019 - |
题
我想知道是否有人可以指出示例或示例代码的方向,以了解有关我正在尝试实现的表操作的一些内容,但尚未能够破解。
我目前有一个正在生成的数据表,使用 Tablesorter 插件对Jquery进行排序和显示。
我想添加这些额外的功能
- 每隔几秒钟使用任何新数据自动更新表格(无需刷新页面)并维护排序。我可以创建PHP脚本来输出新数据的json,但不知怎的,我需要发送它显示的最后一行的id(以便我可以找出要显示的新行)
- 一旦添加了新行(理想情况下是平滑过渡,如淡入淡出),它将具有<!> quot; new <!>的css类;或者会给它带来新颜色的东西
- 然后,在页面保持焦点的15秒内,新颜色将淡入正常的表格样式(删除类)
- 如果页面没有焦点并且有新数据(即在后台刷新但用户正在查看另一个窗口/选项卡),则等待用户将焦点放在窗口/选项卡上,然后执行淡入淡出正常颜色,如3所述。 醇>
我希望这一点已经很明确,我最关心的部分是焦点问题的第4点,但我认为facebook似乎用他们的直播新闻提要来做到这一点。它似乎没有更新,直到我有焦点的窗口(或者我假设)
非常感谢任何帮助和指导!
我的表格如下:
<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>
解决方案
1:要在JavaScript中每隔几秒触发一次事件,请使用 setTimeout()
。使用 :last
过滤器来帮助您抓住最后一行。将id存储在最后一行内的隐藏输入字段中。
2:最后我试过,淡入淡出和下滚对表格行不起作用。我必须创建非常丑陋的黑客才能使这项功能发挥作用,例如每行创建一个全新的<table>
。也许在最近的jQuery版本中有所改进?查看效果,了解可以为内容制作动画的方法列表。
3:您可以使用回调实现此功能,就像使用淡入淡出和下滚以及其他效果一样。
4:我没有检测窗口焦点的经验,虽然看起来似乎有资源可以帮助你解决这个问题。这是一对夫妇: http://www.webdeveloper.com/forum/archive/的index.php /叔33457.html http://www.thefutureoftheweb.com/blog/detect-browser-window-聚焦
不隶属于 StackOverflow