dataTables JS插件响应宽度溢出设置div宽度

Posted 2023-05-07

【中文标题】dataTables JS插件响应宽度溢出设置div宽度

【英文标题】：dataTables JS Plugin responsive width overflows set div width

【发布时间】：2014-10-10 07:38:33

【问题描述】：

使用DataTables 插件显示表格数据，我发现当在表格容器div 上设置百分比宽度时，插件正在执行宽度计算并在表格上设置实际上比div 更宽的像素宽度。

在响应模式下以全宽使用表格时，这不是问题，但在尝试以半宽时，它会超出设置的宽度并强制浏览器窗口水平滚动。

代码：

$('#' + tableID).dataTable(
    "dom": 'Rlfrtip',
    "ajax" : file,
    "responsive": true,
    "columns" : columnDataMap,
    "order": [[ 1, "desc" ]],
    "sAjaxDataProp" : "items",
    colReorder: 
        fixedColumns: 1
    ,
    "columnDefs": [ 
        "targets": 0,
        "sortable": false,
        "data": null,
        "defaultContent": '...'
     ]
);

【参考方案1】：

您可以通过在初始化插件时添加以下选项来阻止 DataTables 向表格添加（错误的）宽度：

"bAutoWidth":false,

最终产品：

$('#' + tableID).dataTable(
    "dom": 'Rlfrtip',
    "ajax" : file,
    "responsive": true,
    "bAutoWidth":false,  
    "columns" : columnDataMap,
    "order": [[ 1, "desc" ]],
    "sAjaxDataProp" : "items",
    colReorder: 
        fixedColumns: 1
    ,
    "columnDefs": [ 
        "targets": 0,
        "sortable": false,
        "data": null,
        "defaultContent": '...'
     ]
);