DataTables对齐文本列

Question

我在应用程序中使用的数据表，它效果很好。要中心文本，我正在使用：

{ className: 'dt-center', targets: '_all' },

但是，对于最后一列，我想对准剩下的文本而不是中心，但是以下内容没有效果：

{ targets: [ 12 ], className: 'dt-left' }

这是我的完整代码：

$('#audits-datatable').DataTable({
    columnDefs: [
        { width: '70px', targets: [ 0, 1, 11 ] },
        { width: '125px', targets: [ 8 ] },
        { width: '600px', targets: [ 12 ] },
        { className: 'dt-center', targets: '_all' },
        { targets: [ 12 ], className: 'dt-left' }
    ],
});

为什么“ dt-left”不是第12列中的“ DT中心”覆盖？它仍然显示为中心而不是向左。

Answer 1

我能够找到解决方案。我将在这里发布它，希望能帮助某人。关键是逆转第6和7行；但是，它仅适用于桌子主体，而不是桌子标头。对于表标头，我需要添加className：“ dt-head-left”。

对我有用的最终代码：

$('#audits-datatable').DataTable({
        columnDefs: [
        { width: '70px', targets: [ 0, 1, 11 ] },
        { width: '125px', targets: [ 8 ] },
        { width: '600px', targets: [ 12 ] },
        { targets: [ 12 ], width: '650px', className: 'dt-left', className: 'dt-head-left' },
        { targets: '_all', className: 'dt-center' }
    ],
});

Answer 2

我也有同样的问题。但这是我在调查中发现的。根据我的发现，解决方案很简单，但了解问题背后的原因很重要。

我不知道你在第12列中使用的是什么类型的值。
我假设它是日期或数字值。
假设我们的列包含一个日期值。

如果是这样，当我们最初加载表时，库会向单元格添加一个附加的类 dt-type-date ，

<td class="dt-type-date">2024-03-06 15:42:33</td>

现在，当我们像这样向数据表对象分配附加配置时，

columnDefs: [
  {
     targets: '_all',
     className: 'dt-left'
  }
],

库会添加单元格的 .dt-left 类

<td class="dt-type-date dt-left">2024-03-06 15:42:33</td>

但是 dt-type-date 类会覆盖 .dt-left 或 中的 css。 dt-右。

如果我们查看这些类，它们都具有相同的 css 属性，即 text-align，如果我们查看 css 文件 datatables.min.css 文件，< code>.dt-type-date 类在之后定义
.dt-left 和 .dt-right。这就是 .dt-left 配置不起作用的原因。

解决方案：

我必须明确地将.dt-head-left和.dt-body-left告知特定的数据表配置对象。它有效。

就你而言，就像我猜的那样，

{ targets: [ 12 ], className: 'dt-head-left dt-body-left' }

我希望这能解决问题。