使jQuery Datatable适合内容区域

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

我没有足够的代表处发表评论，但底线是，你将不得不样式表中，以适应。减少字体，填充等，并设置每个列的宽度，直到它适合容器。在这样一个小容器中有很多列，这不会是一件容易的事情。