更改表格布局的最佳方法-PHP还是Javascript？

Question

您好我的开发同志们！

我是一位C / C ++开发人员，第一次涉足Web开发。 我正在制作足球比赛记分卡。 PHP执行后端处理以生成分数。 Javascript / CSS负责演示。 屏幕一直这样切换（抱歉，由于我没有足够的代表，所以无法附上图片！）

编辑：渲染混乱。 这实际上是一个4x1表，然后是2x1表，然后是1x1表。

__________________
| Brazil 1       |
| Germany 2      |
__________________
__________________
| Italy 3        |
| Argentina 2    |
__________________
__________________
| England 1      |
| Holland 2      |
__________________
__________________
| USA 0          |
| France  2      |
__________________

用户单击下一步按钮

_________________
| Italy  0       |
| Germany 2      |
__________________

__________________
| France 1       |
| Holland 3      |
__________________

下一个按钮被选中

__________________
| GERMANY 2      |
| HOLLAND 1      |
__________________

因此，首先，您将获得4个匹配项的屏幕显示结果。 单击“下一步”按钮后，它将显示半决赛结果。 然后是决赛。

如您所见，记分板表的布局（行数）发生了变化。 如何处理重新绘制的布局：我正在考虑让我的PHP脚本将整个比赛结果搅成一团，并将它们写入隐藏/不可见元素，然后让Javascript处理该元素并根据布局的哪个阶段决定布局我们参加的比赛。

这是一个合理的方法吗？ 我们有更好的方法吗？ 我的方法基于这样一个事实，即只需调用一次服务器即可提取结果，以最大程度地减少加载时间。

谢谢，加油！

Answer 1

我个人将使用jQuery UI Tabs http://jqueryui.com/tabs/之类的东西将每个表加载到选项卡中

您也可以使用其他插件，但是在大多数情况下，我倾向于从jQuery UI开始。

Answer 2

一个好的方法是通过分页。 周围有许多教程（例如PHP分页 ）可以帮助您掌握它。 您采用的方法无法扩展，因为一旦您拥有大量数据，一次性将所有数据拖拉将减慢接口速度，并且不会进行优化。 实际上，在大多数情况下，用户都不会浏览所有分数。

分页背后的基本思想是，仅针对该页面仅获取固定数量的结果。 因此，您将需要诸如页码，每页结果，总结果之类的参数，以限制要从数据库中获取的结果并显示分页链接。 您可以自定义链接的工作方式。

另一种方法是也使用动态表，该表可以使表在浏览和搜索中保持动态（默认情况下将为您提供分页），但这仅是客户端实现，并且仍将从后端获取整个数据，理想情况下不是正如我所说的那样可扩展。 如果您确定数据/表不会超出限制，则可以使用它。 它使UI在浏览和搜索中相当出色。

在评论比赛的地方更新评论。 在这种情况下，您可以一次性获取所有数据。 然后使用jQuery动态显示数据。 检查此链接2014年国际足联世界杯 。 您可以了解如何创建界面。 “国际足联世界杯”的“比赛”浏览器具有不错的用户界面来浏览比赛。

您可以在jQuery中使用类和ID来显示和隐藏（甚至滚动）匹配项。