Question

我们在应用程序中使用数据表。有人可以建议如何在数据表中设置列的宽度。

以下是基本配置：

WATable =   $('#dtAssignment').dataTable({
            "sScrollY": "150px",
            "bAutoWidth": false,
            "bPaginate": true,
            "sPaginationType": "two_button",
            "bLengthChange": true,
            "iDisplayLength": DefaultRecordsPerPage,
            "aLengthMenu": [[100, 250, 500], [100, 250, 500]],
            "sDom": 'Trti<"row"<"two columns" l><"seven-by-five columns"<"#dvGoto">><"offset-by-seven" p>>',
            "aoColumns": dtAssignmentData.template,
            "aoColumnDefs": dtAssignmentData.columnDefs,
             "fnDrawCallback": function(oSettings) {

我们正在获得aoColumns＆amp; ASP.NET MVC应用程序中的aoColumnDefs数据。以下是来自服务器的示例JSON数据。

{"columnDefs":[{"sTitle":"Description","aTargets":"[0]","sWidth":"220px","sName":null,"sType":null},{"sTitle":"User ID","aTargets":"[1]","sWidth":"50px","sName":null,"sType":null},{"sTitle":"Date Added","aTargets":"[2]","sWidth":"80px","sName":null,"sType":null}],"template":[{"mDataProp":"Description","fnRender":null,"sClass":null,"mRender":null,"sWidth":null},{"mDataProp":"CreatedBy","fnRender":null,"sClass":null,"mRender":null,"sWidth":null},{"mDataProp":"CreationDate","fnRender":null,"sClass":null,"mRender":null,"sWidth":null}],"aaData":[{ ... BLAH..BLAH..BLAH

即使在设置“bAutoWidth”后，数据表也会自动调整列大小：false并为每列设置sWidth。

Answer 1

您需要调整您要发送的数据。设置aoColumns和aoColumnDefs都没有意义。仅在您为所有列发送信息时才使用aoColumns。
您在一个选项中设置了"sWidth":null，在另一个选项中设置了"sWidth":"220px"。
避免使用弃用的fnRender选项，建议使用mRender选项。
添加以下CSS规则以避免表使用100％的页面宽度。
```
table.dataTable {
  width:auto;
}
```

请参阅this jsFiddle以获取代码和演示。

无法修复数据表列的宽度

1 个答案: