jQuery 数据表居中对齐 1 列

Question

想要居中仅对齐名为"状态"的第一列：

$("#TransactionTable").DataTable({
ajax: {
url: '/Transaction/SearchMockup',
type: 'POST',
data: {
cardEndingWith: $("#ccn").val(),
status: $("#status").val(),
supplier: $("#supplier").val(),
fromDate: $("#fromDate").val(),
toDate: $("#toDate").val()
}
},
columns: [
{
data: 'Status', render: function (data, type, row) {
switch (data) {
case 1:
return '<div id="circleRed"></div>'
break;
case 2:
return '<div id="circleGreen"></div>'
break;
case 3:
return '<div id="circleOrange"></div>'
break;
}
}
},
{ data: 'TransactionId' },
{ data: 'CreditCardNumber' },
{ data: 'Supplier' },
{ data: 'CreatedAt' },
{ data: 'Amount' }
]
});

我需要添加列选项才能实现它？我尝试阅读所有的数据表文档和谷歌。

Answer 1

您可以使用主题类(引导程序(，也可以在columndef中使用自己的主题类。 喜欢

文本

右、文本左、文本居中

'columnDefs': [
{
"targets": 0, // your case first column
"className": "text-center",
"width": "4%"
},
{
"targets": 2,
"className": "text-right",
}
]

Answer 2

此外，您可以对列进行分组以将一种样式应用于许多样式，如下所示：

columnDefs: [
{ className: 'text-right', targets: [7, 10, 11, 14, 16] },
{ className: 'text-center', targets: [5] },
], ...

Answer 3

您可以手动设置样式

$("select_your_table").DataTable({
....
columns: [
{
mData: "select_property_from_json",
render: function (data) {
return '<span style="display: flex; flex-flow: row nowrap; justify-content: center;">data</span>';
}
},
],
....
});

Answer 4

您还可以在每个列对象中指定单个 css 类名。

在您的情况下：

{
data: 'Status', 
render: function (data, type, row) {
switch (data) {
case 1:
return '<div id="circleRed"></div>';
case 2:
return '<div id="circleGreen"></div>';
case 3:
return '<div id="circleOrange"></div>';
}
},
className: "text-center"
}