Question

具有如下数据表：

“ Wifi代码”显示wifi代码值，如果用户提供了电子邮件/电话，则还将添加相应的按钮以发送电子邮件/短信。

我正试图在一行中显示“ Wifi代码”，而没有自动换行。

表定义：

<table id="visitorsTable" class="display compact responsive nowrap" style="width: 100%">

ColumnDefs：

columnDefs: [                    
            {
                targets: [10], // Wifi Code
                className: "noWrapTd", // white-space: nowrap;
                render: function(wifiCode, b, data, d) {
                    // wifi exists
                    if (wifiCode) {
                        var content = `<span class="mx-2">${wifiCode}</span>`;
                        if (data.Email && data.PhoneNumber) {
                            content +=
                                '<div>' +
                                '<button type="button" class="btnResendByMail mx-1">Email <i class="fas fa-envelope"></i></button>' +
                                '<button class="btnResendBySms">Sms <i class="fas fa-sms"></i></button>' +
                                '</div>';
                            return content;
                        } else {
                            if (data.Email) {
                                content +=
                                    '<button class="btnResendByMail">Email <i class="fas fa-envelope"></i></button>';
                            }
                            if (data.PhoneNumber) {
                                content +=
                                    '<button class="btnResendBySms">SMS <i class="fas fa-sms"></i></button>';
                            }
                        }
                        return content;
                    } else { // wifi does not exists
                        return '<button class="btnGenerate">Generate <i class="fas fa-wifi"></i></button>';
                    }
                }
            }

您已经看到，我已经将“ nowrap”类添加到表定义中。

我还尝试设置一个类“ className：” noWrapTd”，但效果仍然不佳。

还有其他想法吗？

Answer 1

修改后的代码：

columnDefs: [
                {
                    targets: [10], // Wifi Code
                    className: "no-wrap",
                    width: "200px",
                    render: function(wifiCode, b, data, d) {
                        // wifi exists
                        if (wifiCode) {
                            var content = "<span class="mx-2">${wifiCode}</span>";
                            if (data.Email && data.PhoneNumber) {
                                content +=
                                    '<div class="d-inline">' +
                                    '<button type="button" class="btnResendByMail d-inline mx-1">Email <i class="fas fa-envelope"></i></button>' +
                                    '<button class="btnResendBySms d-inline">Sms <i class="fas fa-sms"></i></button>' +
                                    '</div>';
                                return content;
                            } else {
                                if (data.Email) {
                                    content +=
                                        '<button class="btnResendByMail d-inline">Email <i class="fas fa-envelope"></i></button>';
                                }
                                if (data.PhoneNumber) {
                                    content +=
                                        '<button class="btnResendBySms d-inline">Sms <i class="fas fa-sms"></i></button>';
                                }
                            }

                            return content;
                        } else { // wifi does not exists
                            return '<button class="btnGenerate d-inline">Generate <i class="fas fa-wifi"></i></button>';
                        }
                    }
                }               
            ]

首先，我从表定义中删除了nowrap类：

<table id="visitorsTable" class="display compact responsive" style="width: 100%">

和columnDefs：

className: "no-wrap"，//数据表无包装类
width: "200px"，//固定宽度
为按钮和包含按钮的div应用d-inline类

使用数据表的列nowrap无法正常工作

1 个答案: