数据没有出现在数据表中

Question

数据 tidak tampil pada 数据tables

import React, { Component } from 'react';
import Linkify from 'react-linkify';
import './CobaData.css';
import './css/jquery.dataTables.css';

const $ = require('jquery')
$.Datatable = require('datatables.net')

export default class CobaData extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        let data = this.props.data;
        let printData = data;
        console.log(printData);
        let table = $('#exc').dataTable(
            {
                data: printData,
                columns: [
                    { title: "ID" },
                    { title: "Nama" },
                    { title: "Nomor KTP" },
                    { title: "Nomor HP" },
                ],
                searchable: false,
                orderable: false,
                targets: 0,
            }
        );
        console.log(table);

        return (
            <div>
                <table className="display" width="100%" id="exc" >

                </table>
            </div>
        );
    }
}

data无法显示datatables，when in console.log(printData) can be read in 'console'

之前我用的是正常的table就可以读到table，但是用datatables就读不到table上的数据

Answer 1

在 React 应用中使用 jQuery 不是一个好方法。

相反，我建议您使用 react-data-table-component。

然后你的组件将是这样的：

import React, { Component } from 'react';
import DataTable from 'react-data-table-component';
import Linkify from 'react-linkify';
import './CobaData.css';

const columns = [
  {
    name: 'ID',
    selector: 'id_karyawan'
  },
  {
    name: 'Nama',
    selector: 'nama'
  },
  {
    name: 'Nomor KTP',
    selector: 'KTP'
  },
  {
    name: 'Nomor HP',
    selector: 'no_hp'
  },
];

export default class CobaData extends Component {
    render() {
        let data = this.props.data;
        return (
          <DataTable
          title="Arnold Movies"
          columns={columns}
          data={data}
          />
        );
    }
}

数据没有出现在数据表中

Data does't appear in datatables

reactjs

react-props