javascript - 如何在 AngularJS 中创建完整的 html 表？

Question

我需要将数据加载到 html 页面中。

我使用 angularjs 来填充每个表。目前共有 8 张 table 。

我想重写这个，以便表​​计数可以完全动态。

这意味着对每个表进行某种 for 循环，然后在 js 中构建整个表。对 Angular Controller 的基本调用就会出现在 html 页面本身中。

我已经看到了大量如何使用 angularjs 动态构建表行的示例。这已经是很老的新闻了。

是否可以从标签构建整个表，以便我可以创建嵌套到一个大表中的多个表？

类似这样的吗？

<table>

for( i = 0; i < tablesCollection.length;i++ )
{
paintTable( i );
}

</table>

结果如下所示(四个表嵌套在一个两列两行的主表中？

<table>

<tr>
<td>
<table id=table01>
<tr>
<td>
</td>
</tr>
</table>
<td>
<table id=table02>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<table id=table03>
<tr>
<td>
</td>
</tr>
</table>
<td>
<table id=table04>
<tr>
<td>
</td>
</tr>
</table>
</td>
</tr>

</table>

Answer 1

我认为使用datatables可以解决你的问题。它非常容易使用。

HTML:

<div id="data-table"></div>

初始化可以动态完成，这意味着您可以使用动态数据创建表(循环通过json)也许这可以解决您“将表组合成一个”的问题。 一个简单的(静态)示例:

var table = $('#data-table').DataTable({
    {'sTitle': 'First Name', 'mData': 'first_name'},
    {'sTitle': 'Last Name', 'mData': 'last_name'},
    {'sTitle': 'Address', 'mData': 'address'},
});

这将创建一个包含“名字”、“姓氏”和“地址”列的表。

用数据更新表格:

table.row.add(data);

它非常容易使用，文档很棒，有很多可能性，并且您可以重用很多代码。