无法修复数据表列的宽度

时间:2015-10-15 16:24:47

标签: jquery datatables

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

以下是基本配置:

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。

1 个答案:

答案 0 :(得分:0)

  • 您需要调整您要发送的数据。设置aoColumnsaoColumnDefs都没有意义。仅在您为所有列发送信息时才使用aoColumns

  • 您在一个选项中设置了"sWidth":null,在另一个选项中设置了"sWidth":"220px"

  • 避免使用弃用的fnRender选项,建议使用mRender选项。

  • 添加以下CSS规则以避免表使用100%的页面宽度。

    table.dataTable {
      width:auto;
    }
    

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