ajax - 如何在没有 JSF 标记库的情况下编写 <table> 标记 (h :datatable or ui:repeat) but still use JSF for controlling page flow

Question

我有各种大小如下的表:12 列和最多 1800 行。将其呈现给用户需要 8 秒。我目前使用 h:dataTable。我尝试从 JSF 管理的 Java List 对象中获取行数据。虽然这工作正常，但渲染表格的 8 秒时间是 Not Acceptable 。我正在尝试寻找其他方法来执行此操作，但需要将 JSF 保留为页面上操作按钮的 Controller 。换句话说，我想创建“表标记自己发送到页面，然后仍然将h:commandButtons`上的操作关联到托管bean方法。有没有办法做到这一点？

我能想到的唯一方法是使用jquery或ajax来创建表标记，尽管我对JSF以外的UI开发技术很陌生。也许然后我会以某种方式将其传递给客户端进行渲染。唯一的问题是我不知道如何从列表中生成标记，第二个问题是如何将其注入(inject)到当前 XHTML 文件中的 h:commandButtons 之间。

有人知道如何解决这个问题而不需要完全抄袭 JSF 吗？我遇到的一个主要问题是业务需求表明我们无法对数据表进行分页(例如:“下一步”/“后退”按钮一次显示 100)。因此，我可能在想我可以通过对服务器的 Ajax 调用来完成此操作，并在页面准备好后一次获取 100 行，并在幕后向用户附加新行。这将是“感知”的加载速度，但我根本不知道如何做到这一点。

Answer 1

对于 12 列、1800 行的数据来说，8 秒已经不错了。 10~100 行不到一秒就完成了，对吗？

在继续之前，您是否绝对肯定所有这 1800 行都应该立即显示？这不是对用户非常不友好吗？用户是否不需要使用 Ctrl+F 来查找所需的信息？这不是很烦人吗？为什么不引入过滤(搜索字段)和分页功能，就像 Google 所做的那样，以合理且用户友好的方式呈现无数结果？

无论如何，您可以考虑使用 PrimeFaces 的“按需数据”选项<p:dataTable> ，其中数据是在滚动期间通过 ajax 通过 <p:dataTable liveScroll="true"> 加载的。另请参阅showcase example 。无需自行编写代码，也无需手动摆弄 jQuery。 PrimeFaces 已经在幕后完成了这一切。

如果您出于某种原因不想使用 PrimeFaces，那么您可以考虑使用 OmniFaces <o:componentIdParam>与一些 jQuery“实时滚动”插件结合使用。另请参阅 its (snapshot) showcase page 中的最后一个示例一个启动示例(应该很容易地调整为通过点击滚动底部而不是单击来触发)。