具有自动高度的可滚动数据表答案

【问题标题】：Scrollable DataTable with Auto Height具有自动高度的可滚动数据表
【发布时间】：2016-02-25 15:08:24
【问题描述】：

Alloy UI's DataTable 提供了一个scrollable 属性来定义x 或y 滚动。这必须与一组height 或width 组合使用。

我怎样才能拥有一个可以调整到任何高度/宽度的表格，同时保持scrollable 功能？

【问题讨论】：

我认为AUI-2088 可能需要修复才能使其中任何一个起作用。

标签： css twitter-bootstrap alloy-ui

【解决方案1】：

Alloy UI API 允许您以 px 或整数指定高度和宽度。如果要指定百分比，请为 DataTable 的 table 标签或包含 DataTable 的 div 设置 CSS 属性“width: 100%”。

例子，

首先，创建一个数据表。
以百分比形式添加宽度的 CSS 属性

var dataTable =  new Y.DataTable({
    id: 'mydata-table',
    footerView:   Y.FooterView,
    scrollable: "xy",
    height:'300px').render();

    $('#mydata-table').css('width', '80%');
    $('#mydata-table').css('height', '40%');

详情请参考link。

【讨论】：

【解决方案2】：

试试这个代码， 它适用于移动以及桌面。

container.find(".dataTables_scrollBody").css('height', container.height() - 20);

这里的容器是放置数据表的<div>。

【讨论】：

发现 v1.10.11 还必须设置“最大高度”变量并运行 table.settings()[0].oScroller.measure() 以重新计算页面大小以显示数字。