javascript - 如何使用 jQuery UI 调整 datatables.js 列的大小

Question

我在 stackoverflow 中找到了调整表格列大小的解决方案

jQuery UI Resize with table and colspans

我试图将其应用于使用服务器端处理填充的数据表，但数据表不允许更改列宽。

我已经尝试过这个http://jsfiddle.net/BlackSRC/JvELx/2/

我有这个简单的数据表

<table id="datatable-1" class="table table-hover" style="width: 100%">
</table>

我的数据表初始化是:

$(table).DataTable({
	'lengthMenu': [[10, 25, 50, 100], [10, 25, 50, 100]],
	'ordering': false,
	'processing': true,
	'serverSide': true,
	'dom': 'Blfrtip',
	'ajax': {
		'url': 'ajax.php',
		'type': 'GET'
	},
	'columns':[
		{'data': 'id', 'title': 'Id'},
		{'data': 'A', 'title': 'A'},
		{'data': 'B', 'title': 'C'},
		{'data': 'C', 'title': 'D'},
		{'data': 'D', 'title': 'E'}
	]
});

有人知道如何使用 datatables.js 调整列大小吗？

Answer 1

尝试在数据表上将 autoWidth 选项设置为 false

$(table).DataTable({
    'lengthMenu': [[10, 25, 50, 100], [10, 25, 50, 100]],
    'ordering': false,
    'processing': true,
    'serverSide': true,
    'autoWidth': false,
    'dom': 'Blfrtip',
    'ajax': {
        'url': 'ajax.php',
        'type': 'GET'
    },
    'columns':[
        {'data': 'id', 'title': 'Id'},
        {'data': 'A', 'title': 'A'},
        {'data': 'B', 'title': 'C'},
        {'data': 'C', 'title': 'D'},
        {'data': 'D', 'title': 'E'}
    ]
});

然后添加CSS

table {
    width: 100%;
}