在 MVC 框架中呈现 HTML 表格答案

【问题标题】：Rendering HTML tables in an MVC framework在 MVC 框架中呈现 HTML 表格
【发布时间】：2015-02-24 14:43:54
【问题描述】：

我一直使用 Struts2 作为我的 MVC 框架，作为构建基于 J2EE 的 Web 应用程序的一部分。

该应用程序的一部分是显示主要有数千行和数十列大小的报告（HTML 表格）。我已经实现了分页以使报告可读等...

今天的报告系统工作方式如下：整个数据以 OOP 方法准备并放置在 ValueStack 中。对应的 JSP 会读取 valueStack 的数据并使用 JSTL 绘制 HTML 代码。

我正在修改代码，我想重新审视这个逻辑以符合行业的最佳实践。这里的主要问题是，有哪些最佳实践？

渲染和绘制报告需要时间。尤其是在基于 IE 的浏览器上，在显示数据之前页面变得无响应（IE8 支持是必须的）。那么最好的选择是什么？

是否使用 javascript 框架如 jQuery 并将绘图部分移动到客户端？我是否知道以某种方式将整个 HTML 代码存储在值堆栈中并一次显示它？您认为最佳的方式是什么？

【问题讨论】：

一个最佳实践是仅在服务器上计算您显示的分页选项卡的数据。如果你显示例如页面上的结果 100 到 199，订购您的数据并仅从服务器获取项目 100 到 199，这样您就可以节省服务器的计算时间。尽管您从服务器加载每个页面，但每次视图处理较少的数据量可能会提高效率。
另一种思考方式：渲染所有内容并呈现它的解决方案可能是呈现整个结果集的最快方式。问题很少可能想要整个结果集。如果您可以确定人们需要什么并提供适当的过滤方法，那么人们将在发送更少的数据的情况下更快地得到他们想要的东西。另一个考虑因素是，即使他们想要查看整个集合（在浏览器中）响应性是关键，考虑 50 条记录的可见区域但 json 提取大小为 100。然后随着范围移动到末尾来获取新集合可用记录。
有些 JavaScript UI 控件已经提供了这个功能（无缝滚动），它是现代“数据网格”的一个共同特征。
ui-grid.info/docs/#/tutorial/212_infinite_scroll
旧的 ng-grid（其中 ui-grid 是继承者）也有这个特性 via：scope.$on('ngGridEventScroll', function () {/*append rows to grid*/ });

【解决方案1】：

何时以及如何使用分页主要基于用例，并且应根据总记录数、每页记录数、单个记录的大小、使用的主要设备对每个案例进行评估在生态系统（主要是桌面、主要是移动、混合等）、网络、服务器和数据库功能等方面。

但是，如果您决定使用分页（如果您有很多记录，这是唯一的选择），那么唯一的最佳实践是仅加载该请求所需的数据。

如果您想在 10.000 的结果集中查看从 90 到 100 的结果，那么在页面中加载所有 10.000 条记录会很糟糕；在服务器端加载所有 10.000 条记录，然后仅将请求的 10 条传输到客户端也是错误的；过滤必须在尽可能低的级别应用，通常是数据库。

既然你已经标记了这个 Struts2、jQuery 和 Grid，我强烈建议你看看Struts2-jQuery-Grid-Plugin，以及它的Showcase。

它是新的并且被积极维护，它只需要在初始学习曲线上付出一点努力。

它是原生 jQueryGrid 的 Struts2 包装器（如果您想自己处理 Javascript，可以使用原始包装器）。

jQGrid pagination 上的 SO 上有 200 多个问题，请阅读。

【讨论】：