数据表对齐列中的文本

Question

我在我的应用程序中使用 DataTables，效果很好。为了使文本居中，我使用：

{ 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' }
    ],
});

为什么第 12 列中的“dt-left”没有覆盖“dt-center”？它仍然显示居中对齐而不是左对齐。

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列中，你使用的是哪种值。 我假设，它要么是

date

要么是

numeric

值。 假设我们的列包含一个日期值。

如果是这样，当我们最初加载表时，库会添加一个附加类

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

或

.dt-right

中的 css。

如果你查看这些类，它们都具有相同的 css 属性，即

text-align

，如果你查看 css 文件

datatables.min.css

文件，

.dt-type-date

类是在

.dt-left

和

.dt-right

之后定义的。这就是

.dt-left

配置不起作用的原因。

我解决这个问题的方法是，

我必须明确告诉，

.dt-head-left

和

.dt-body-left

特定的数据表配置对象。而且它有效。

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

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

希望能解决问题。