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

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

原文由 Ballon Ura 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

您可以在 columndef 中使用您的主题类（引导程序）或您自己的主题类。像

文字右，文字左，文字居中

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

原文由 Ahmed Sunny 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

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

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

原文由 aabiro 发布，翻译遵循 CC BY-SA 4.0 许可协议