DataTables - scrollX导致表头变形

Question

我正在使用具有scrollX参数的DataTables，但它导致thead列折叠。

注意：数据表格出现在React项目的Bootstrap模态框中。

如何解决这个问题？

当我单击其中一列时，导致其刷新，它会自动修复。此外，如果我删除scrollX，它也不会折叠。

初始化代码：

$('#item-search').DataTable( {
          ajax: {
            "data": {
              type: "map_items",
              map_id: this.map_id
            },
            "dataSrc": (r) => {
              console.log(r);
              return r.data;
            },
            type: "POST",
            url: "src/php/search.php"
          },
          autoWidth : false,
          columns: [
            {
              "data": "brand"
            },
            {
              "data": "name"
            },
            {
              "data": "quantity"
            },
            {
              "data": "measurement"
            },
            {
              "data": "type"
            },
          ],
          dom: 'rtlip',
          language: {
            "info": "Showing page _PAGE_ of _PAGES_",
            "infoFiltered": ""
          },
          lengthMenu: [ 1, 2, 3 ],
          pageLength: 1,
          processing: true,
          responsive: true,
          scrollX: true,
          select: {
            style: "multi"
          },
          serverSide: true
      });

- A. L

---

你有查看 DataTables 支持论坛吗？那个问题可能已经在那里被回答了。 - Difster

@Difster 一直在谷歌上搜索我的问题的几种变体。大多数答案使用较旧的版本。 - A. L

Answer 1

要实现水平滚动，DataTable应该使用以下代码进行初始化：

"sScrollX": "100%",
"sScrollXInner": "110%",
"bScrollCollapse": true,
"fixedColumns":   {
   "leftColumns": 1
}

- Rosue Walford

Answer 2

在数据表初始化中，包含以下属性。

autoWidth : true

随着添加此功能

"fnInitComplete": function(oSettings) {
                        $( window ).resize();
                    }

 "fnDrawCallback": function(oSettings) {
      $( window ).trigger('resize');
    }

- Sunil

---

我应该指出，这个数据表格是作为React项目中BootStrap模态框的一部分出现的。因此，当它不是模态框的一部分时，它可以正常工作。 - A. L

已更新答案，请注意我将autoWidth更改为true。 - Sunil

Answer 3

这个在我的Angular项目中工作

this.dtTarifas = {
      scrollX: true,
      autoWidth: false,
      lengthChange: false,
      responsive: false
}

我的package.json文件中有"angular-datatables": "7.0.0"

- IvFlores

Answer 4

$('#DataTableID').DataTable({
  //"scrollX": true,            
  "initComplete": function (settings, json) {  
    $("#DataTableID").wrap("<div style='overflow:auto; width:100%;position:relative;'></div>");            
  },
});

- metodi25