Question

我第一次尝试使用jQuery Datatables。我从Web服务获取数据，然后将其按照Datatables期望的格式（Javascript数据数组和列数据）。我的问题是我试图将这个放入一个小部件放置在仪表板上，这样容器很小，我需要数据表来适应它的高度和宽度。

<div class="column">
<div class="portlet" style="border:2px solid;">
    <div class="portlet-header">Table</div>
    <div class="portlet-content" id="b_container"></div>
</div>

var createNewTable = function (data) {

var aoColumn = _.map(_.first(data), function (row) {
    return {
        'sTitle': row.Key
    };
});
var aaData = _.map(data, function (row) {
    return _.map(row, function (innerRow) {
        return innerRow.Value;
    });
});
$('.portlet-content').append('<table id ="t_container"><thead></thead><tbody></tbody></table>');
$('#t_container').dataTable({
    "bAutoWidth": false,
        "aaData": aaData,
        "aoColumns": aoColumn
});

};

完整的代码示例可以在这个小提琴中看到：

http://jsfiddle.net/2ccgk/3/

Answer 1

我没有足够的代表发表评论，但最重要的是你必须为你的桌子设计合适的样式。减少字体，填充等，并设置每列的宽度，直到它适合容器。在如此小的容器中有这么多列，这不是一件容易的事。

使jQuery Datatable适合内容区域

1 个答案: