Question

数据表列未自动调整大小。这是我的代码

var oTable =$('#test').dataTable( {
        "bJQueryUI": true,
        "aaData": aDataSet,
        "sPaginationType": "full_numbers",
        "oTableTools": {
        "aButtons": [ {"sExtends": "csv" , "sButtonText": "Save as CSV"}],
        "sSwfPath": "js/jquery/copy_csv_xls.swf"
    },
    "bAutoWidth" : true,
    "sDom": '<"H"lCf>t"H"<"F"iTp>',
    "aoColumnDefs": [
        { "bVisible": true, "aTargets": [ 11 ] }
    ],
    "aoColumns": [
        { "sTitle": "column1" },
        { "sTitle": "column1" },
        { "sTitle": "column1" },
        { "sTitle": "column1"},
        { "sTitle": "column1"},
        { "sTitle": "column1" },
        { "sTitle": "column1" },
        { "sTitle": "column1" },
        { "sTitle": "column1"},
        { "sTitle": "column1 By"},
        { "sTitle": "column1 Date"}
    ]
    } );
oTable.fnAdjustColumnSizing();
});

我希望所有列都至少根据其标题值自动调整大小。

Answer 1

你就是这样做，如果它是“正常的”<table>：

th, td {
    white-space: nowrap;
}

见fidle - ＆gt; http://jsfiddle.net/YrWG5/ 带有一些极长的标题/内容。

Answer 2

您还可以使用数据表的Fluid column width功能。如果您要显示更多列，这将有助于自动调整大小并在X和Y轴上添加滚动

$(document).ready(function() {
    var table = $('#example').DataTable( {
        scrollY:        "300px",
        scrollX:        true,
        scrollCollapse: true,
        paging:         false,
        columnDefs: [
            { width: '20%', targets: 0 }
        ],
        fixedColumns: true
    } );
} );

来自HERE

Answer 3

在数据表初始化之后输入此代码：

oTable.find('thead th').css('width', 'auto');

Answer 4

使用以下代码：

   $($.fn.dataTable.tables(true)).DataTable()
      .columns.adjust();

这将调整表结构（表的CSS）的大小。

自动调整列宽数据表的大小

4 个答案: