Tablesorter重新加载tbody或仅在数据库更改/更新时重新加载该行

时间:2013-07-18 16:09:07

标签: php javascript ajax jquery tablesorter

当用户想要在表中添加或删除行时,我已经看到很多tablesorter触发更新的示例但是我想看看它是否可以重新加载整行或者tbody如果数据库有变化吗?

这就是我的想法,请告诉我这是不是一个好主意。

JAVASCRIPT和PHP中的设置:

1。当页面首次加载时,脚本将进入并显示将显示lastUpdate的(.PHP)页面(例如:'2013-07-18 10:37:29') .PHP页面将进入数据库(MySQL)并获取lastUpdate并显示它)此lastUpdate信息(日期/时间)将保存在VAR中以供日后使用。

2. 添加一个计时器,该计时器会ping同一个(.PHP)页面,并将它的lastUpdate与我们首次加载页面时获得的初始lastUpdate进行比较。

3. 我们将每隔x秒(可能是10秒)继续ping,以嗅探数据库中lastUpdate的更改。

4。(比较):如果初始的lastUpdate值小于我们刚从数据库获得的值那么这意味着数据库的内容已经改变,它会做一个两件可能的事情。

从这一点来说,我喜欢做的是:

选项1: 仅删除旧行并将其替换为更新的行。 每行都有一个唯一的ID,因此javascript也可以获取此ID#,然后只更新表中的那一行。

OR

选项2: 删除当前Tbody,然后使用新数据重新加载整个Tbody。

该表有很多行/列,并使用图像,href等等...所以每行都是一个重排,这就是为什么我想尽可能使用选项1, 但我不知道如何做最后一部分!?

(与聊天程序不同)只要我知道在数据库中更新了哪个ID,行就不必是正确的顺序。

假设我们有一个地址簿,用户可以编辑/更新,添加,删除联系人和联系信息。现在我只想扫描更改,找到更改时发送ID和数据从数据库行到表中的行,通过ID匹配它,然后更新它或删除旧的并用新的替换它,但如果在数据库中找不到id,则从表中删除id因为它已经不在数据库中了。

所以我遇到的唯一问题就是多个用户同时进行了更改(比如确切的秒),然后只会显示一个更新。但我认为通过检查数据库是否有任何其他不同的ID具有确切的日期/时间以及是否有更新它们也可以绕过。

非常感谢您阅读此内容以及您提供给我的任何帮助。

2 个答案:

答案 0 :(得分:1)

选项1.来回发送的数据较少。减少渲染。

这就是我要做的事情:

有一个JS setTimeout函数,AJAX检查我的服务器端脚本/ servlet /等等。如果任何行与SQL查询匹配,我会通过JSON发送回来。

回到我的JSON后,我将解析每个JSON对象(表格行),并用新数据替换相应的TR

答案 1 :(得分:1)

使用WebSockets和/或服务器推送。 如果您有1000个客户端,则为0.1 * 1000 =每秒100个请求。 我不确定你的服务器端是否可以。

使用websockets或服务器推送时,如果发生数据库更新(更新它的人应该抛出一个事件),服务器会发送给客户端:

  • 数据库行的顺序(它们都具有唯一ID)
  • 已更改的行

最好使用与PHP不同的东西来更新客户端。例如,Java Servlets。也许,只是为了更新客户端的db行,我的意思是,你可以保留最初的PHP页面。

回答@compcobalt: 简化,你通过websockets接收两种数据类型。

  • JSONencoded array
  • 包含表行的XML文档

这是数组:[47,27,1001,36,4,833,5,98,478,...]。该数组包含 ALL 数据库行的ID ,顺序。正确的顺序可能是,例如。例如,数据库中行的顺序。 javascript现在立即修改html表以对应于该顺序。即使在第26行之前,现在阵列中没有这样的行,javascript也会将其删除。

<tr data-id="47">...</tr><tr data-id="27">...</tr><tr data-id="1001">...</tr>

即使JS对行#1001一无所知,或者行#27已更新。 然后,它会获取XML文档(或者JSON,或者您喜欢的任何格式)并解析它。

这里获取更新的第27行和新行#1001的内容,并用内容填充表格行。

然后,开始等待新服务器推送。