css jQuery数据表居中对齐1列

dwbf0jvd  于 2022-12-24  发布在  jQuery
关注(0)|答案(4)|浏览(129)

希望仅将名为“状态”的第一列居中对齐:

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

我需要添加列选项来实现它吗?我试着阅读所有的数据表文档和谷歌。

f45qwnt8

f45qwnt81#

您可以使用自己的主题类(引导),也可以在columndef. like中使用自己的主题类
文本靠右、文本靠左、文本居中

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

zynd9foi2#

此外,还可以对列进行分组,以便将一种样式应用于多个列,如下所示:

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

nszi6y053#

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

vql8enpb4#

您可以手动设置其样式

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

相关问题