DataTables.net в React - требуется всплывающая подсказка для ячейки столбца заголовка

#javascript #jquery #reactjs #datatables

#javascript #jquery #reactjs #таблицы данных

Вопрос:

Я использую datatables.net таблица внутри приложения React. Я хочу знать, как я могу создать всплывающую подсказку в заголовке столбца «Эффективный год постройки».

 componentDidMount() {
    this.setupTable(this.props.data);
}

setupTable(data) {

    this.$el = $(this.el);
    this.$el.DataTable(
        {
            alternatingRowStyle: true,
            sort: 'enable'
            data: data,
            "oLanguage": {
                "sSearch": "Search"
            },
            columns: [
                {
                    "title": "Parcel ID",
                    mData: "ParcelID"
                },
                {
                    "title": "Land Value",
                    mData: "TotalLandValue",
                    render: $.fn.dataTable.render.number(',', '', 0, '$')
                },
                {
                    "title": "Effective Year Built",
                    mData: "effectiveyearbuilt"
                }
            ]
        }
    )
}

Я перепробовал несколько решений, но безрезультатно. Похоже, я также не могу пометить уникальный идентификатор в этой конкретной ячейке? Спасибо за любую помощь.

1. Я использовал таблицы данных с React и добавил стили к столбцам, указав имя класса в определении столбца. Возможно, вы могли бы указать имя класса, а затем использовать CSS для всплывающей подсказки согласно w3schools.com/css/css_tooltip.asp .

2. Спасибо, Крис, вот как я это исправил 🙂 — «title»: «<span class=’d-inline-block’ tabindex=’0′ data-toggle=’tooltip’ title=’Предполагаемый эффективный возраст улучшения.’> Эффективный год постройки</span>»,

Ответ №1:

Если вам нужно присвоить атрибут ( id , в вашем случае) вашему узлу заголовка столбца, вы можете сделать это с помощью чего-то вроде:

 $(dataTable.column(2).header()).attr('id', '/* some id here */');

где DataTable — это переменная, возвращаемая DataTable() конструктором

1. Спасибо, Евгений, я изменил узел заголовка столбца, добавив в «title»: «<span class=’d-inline-block’ tabindex=’0′ data-toggle=’tooltip’ title=’Предполагаемый эффективный возраст улучшения.’> Эффективный год постройки</span>»

Ответ №2:

В зависимости от ваших потребностей, вам может быть полезно использовать пакет, подобный react-table (react-table) — я использовал это раньше в проекте, и это работает действительно хорошо. Вы можете определять пользовательские визуализируемые компоненты, для которых вы можете просто пойти и взять другой пакет react-tooltip (react-tooltip).

Я считаю, что немного проще работать с пакетами узлов, специфичными для React, вместо того, чтобы использовать библиотеки JS, где это возможно.

1. Да, я полностью согласен и знаю, что мне не следует смешивать jQuery с React, поскольку необходимо проявлять большую осторожность, чтобы разделить таблицы DOM и React’s DOM. К сожалению, это было обязательным требованием.