jQuery 数据表对齐中心 1 列
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/45446910/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
jQuery Datatables align center 1 column
提问by Ballon Ura
Want to align center just the first column called "Status":
想要将名为“状态”的第一列居中对齐：
$("#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' }
]
});
What i need to add the columns option to make it happen? I try to read all the Datatables doc and google.
我需要添加列选项来实现它吗？我尝试阅读所有数据表文档和谷歌。
回答by Ahmed Sunny
You can use your theme classes (bootstrap), or your own in columndef. like
您可以在 columndef 中使用您的主题类（引导程序）或您自己的主题类。喜欢
text-right, text-left,text-center
文字右、文字左、文字居中
'columnDefs': [
{
"targets": 0, // your case first column
"className": "text-center",
"width": "4%"
},
{
"targets": 2,
"className": "text-right",
}],
回答by aabiro
Also, you can group the columns to apply one style to many like so:
此外，您可以将列分组以将一种样式应用于多种样式，如下所示：
columnDefs: [
{ className: 'text-right', targets: [7, 10, 11, 14, 16] },
{ className: 'text-center', targets: [5] },
], ...
回答by Mario Tilli
You can also specify a single css class name inside each column object.
您还可以在每个列对象内指定单个 css 类名。
In your case:
在你的情况下：
{
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"
}
回答by Wahid Masud
You can style that manually
您可以手动设置样式
$("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>';
}
},
],
....
});
