jQuery Datatables 对齐中心 1 列

Posted 2023-05-07

【中文标题】jQuery Datatables 对齐中心 1 列

【英文标题】：jQuery Datatables align center 1 column

【发布时间】：2018-01-08 20:34:09

【问题描述】：

只想将名为“状态”的第一列居中对齐：

        $("#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' 
            ]
        );

我需要添加哪些列选项来实现它？我尝试阅读所有 Datatables 文档和 google。

【参考方案1】：

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

文本右，文本左，文本中心

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

【参考方案2】：

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

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

【参考方案3】：

您还可以在每个列对象中指定一个 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"

【参考方案4】：

你可以手动设置样式

$("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>';
            
        ,
    ],
    ....
);