自动调整列宽datatable。

The datatable column are not auto resizing. Here is my code

datatable列没有自动调整大小。这是我的代码

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();
});

I want all the columns to auto resize at least based on their header value.

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

3 个解决方案

#1

You just do it like if it was a "normal" <table> :

你只需要把它当做“正常的”

th, td {
    white-space: nowrap;
}

see fidle -> http://jsfiddle.net/YrWG5/ with some extreme long header / content.

查看fidle -> http://jsfiddle.net/YrWG5/，有一些非常长的标题/内容。

#2

You can also use datatable's Fluid column width feature. This will help auto-resize and add a scroll both on the X and Y axis should you have more columns to display

您还可以使用datatable的流体列宽度特性。如果要显示更多的列，这将有助于自动调整大小并在X轴和Y轴上添加滚动

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

Gotten from HERE

从这里得到

#3

Put this code after data table initialization:

将此代码放在数据表初始化后:

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

#1