jQuery 数据表对齐中心 1 列 [英] jQuery Datatables align center 1 column

查看:23
本文介绍了jQuery 数据表对齐中心 1 列的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

只想将名为状态"的第一列居中对齐:

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.

推荐答案

您可以使用您的主题类 (bootstrap),或者您在 columndef 中自己的.喜欢

You can use your theme classes (bootstrap), or your own in columndef. like

文字向右,文字向左,文字居中

text-right, text-left, text-center

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

这篇关于jQuery 数据表对齐中心 1 列的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆