Question

我在React应用程序中使用了datatables.net表。我想知道如何在“生效年份”列的标题上创建工具提示。

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"
                }
            ]
        }
    )
}

我尝试了许多解决方案，但无济于事。我似乎也无法在该特定单元格中标记一个唯一ID？感谢您的帮助。

Answer 1

根据您的需求，您可能会受益于引入诸如react-table (react-table)之类的程序包-我之前在项目中使用过此程序，它确实工作得很好。您可以定义自定义的呈现组件-您可以直接去获取另一个软件包react-tooltip (react-tooltip)。

我发现使用React特定的节点包比在可能的情况下拉入JS库要容易一些。

Answer 2

如果您需要为列标题节点分配属性（在您的情况下为id），则可以使用以下方法来做到这一点，

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

其中dataTable是一个变量，由DataTable()构造函数返回

React中的DataTables.net-需要标题栏单元格上的工具提示

2 个答案: