在 HTML 中加载大表，还有哪些其他可能性？答案

【问题标题】：loading big tables in HTML, what are other possibilities?在 HTML 中加载大表，还有哪些其他可能性？
【发布时间】：2013-11-27 10:34:09
【问题描述】：

出于特定目的，我需要一次以表格格式显示数千条记录的信息，无需将其拆分为更少的记录并浏览页面（如 gridview 等），您可以看到此处为此类表的示例：

http://khi.ac.ir/EnglishW/info/Students/All_Students.aspx

但问题是加载此类表的速度并不高。我的问题是如何改善这一点？还可以使用哪些其他技术/技术？

任何帮助将不胜感激。

【问题讨论】：

标签： javascript html performance performance-testing

【解决方案1】：

无需将其拆分为更少的记录并在页面中导航

为什么不简单地在滚动时创建一个 ajax 请求，以便在第一次加载页面时只加载可见记录，而在向下滚动时加载其他记录？

例如：jscroll.com

【讨论】：

【解决方案2】：

方法

如果你的表只是属性相似的数据的重复，你可以

使用JSON发送数据；
使用模板系统（例如handlebarsjs）呈现表格；

代码

假设您有一个array of arrays，例如：

{
 myData: [
   ['row1', 'data', 'data'],
   ['row2', 'data', 'data'],
   ['row2', 'data', 'data'],
 ]
}

模板

您的HandlebarsJS 模板如下所示：

<script id="entry-template" type="text/x-handlebars-template">
    <table>
    {{#each myData}}
      <tr>
        {{#each this}}<!-- row's data -->
          <td>{{ this }}</td>
        {{/each}}
      </tr>
    {{/each}}
    </table>
</script>

HTML

<head>
    <script>
        var mySource   = $("#entry-template").html();
        var myTpl = Handlebars.compile(mySource);
        var myJSON = {/* JSON above */};

        $(document.body).append (myTpl (myJSON)); // insert result to page
    </script>
</head>
<body>
    <!-- result should appears here -->
</body>

【讨论】：

【解决方案3】：

我总是发现下划线模板在更大的表格中表现出色。

模板：

<script id="tmpl-students" type="text/template">

    <% for (var i = 0; i < students.length; i++) { %>
      <% var student = students[i]; %>
      <tr>
          <td><%= student.name %></td>
          <td><%= student.docType %></td>
          <td><%= student.field3 %></td>
          <td><%= student.field4 %></td>
      </tr>
    <% } %>
</script>

然后在你的js文件中：

// grab the template
var tmpl = $('#tmpl-students').html();

// compile the template
var compiled = _.template(tmpl, { students : data });

// render the html
$('#yourDiv').html(compiled);

看这里： http://underscorejs.org/#template

【讨论】：

感谢您的建议；）