Колонка теперь не работает с использованием таблиц данных

Question

Имея данные, как показано ниже:

«Код Wi-Fi» показывает значение кода Wi-Fi, и если пользователь предоставил адрес электронной почты / телефонТакже добавлена ​​соответствующая кнопка для отправки электронной почты / SMS-сообщений.

Я пытаюсь отобразить «Wifi Code» в одну строку без переноса.

Определение таблицы:

<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%">

И колонкуDefs:

1. className: "no-wrap", // Класс без данных Datatables

2. width: "200px", // Фиксированная ширина

3. Применено d-inline класс для кнопок и div, содержащий кнопки