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

Question

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

如何让 table 适应 window 的 height/width 并保持 scrollable 功能？

Answer 1

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

示例，

首先，创建一个数据table。
添加 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

Answer 2

试试这个代码， 它在 mobile 和 desktop.

中对我有用

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

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

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

Scrollable DataTable with Auto Height

css

twitter-bootstrap

alloy-ui