Question

我最近试图在reactjs中使用datatables.net，但是我很难将jQuery转换为reactjs。我已经尝试过datatables.net的文档，但毕竟返回使用它的虚拟Dom后，我无法使其正常工作。导致问题。

我已经尝试使用ref并将其加载到ComponentDidMount()中，但是我无法自定义表格标题，列或使用完整的指导性文档。

import React, { Component } from 'react';
import dt from 'datatables.net-bs';

class DataTables extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data:  [
        {
          "id": "1",
          "name": "Tiger Nixon",
          "position": "System Architect",
          "salary": "$320,800",
          "start_date": "2011/04/25",
          "office": "Edinburgh",
          "extn": "5421"
        },
        {
          "id": "2",
          "name": "Garrett Winters",
          "position": "Accountant",
          "salary": "$170,750",
          "start_date": "2011/07/25",
          "office": "Tokyo",
          "extn": "8422"
        }
      ]
    };
  }

  componentDidMount() {
    this.$el = $(this.el);
    this.$el.DataTable = dt;
    this.$el.DataTable({
      data: this.state.data,
      columns: [
        { data: 'name', title: 'Name' },
        { data: 'position', title: 'Position' },
        { data: 'office', title: 'Office' },
        { data: 'extn', title: 'Extn' },
        { data: 'start_date', title: 'Start_date' },
        { data: 'salary', title: 'Salary' }
      ]
    });
  }

  componentWillUnmount() {
    $('.display')
      .find('table')
      .DataTable()
      .destroy(true);
  }

  render() {
    return (
      <div>
        <table className="display" width="100%" ref={el => this.el = el} />
      </div>
    );
  }
}

export default DataTables;

我得到了表，但是我无法自定义表头，列，或者我不知道如何使用onRowClick或选择行，我在jQuery的datatables文档中得到了它。但是如何在反应中使用它。

预期结果是一个示例，该示例说明如何使用数据表对功能齐全的表，行选择，行单击，单元格编辑，自定义单元格做出反应和自定义列。一个示例，以了解如何在react中使用为jQuery创建的数据表中的任何文档。

注意：我已经搜索了很多东西，并且我知道还有很多其他的图书馆，但是我想扩展我的经验。为了更好地将jQuery与reactjs结合使用

如何以正确的方式在reactjs中使用datatables.net？

0 个答案: