Question

我正在使用react，在检查datatables(jquery plugin)与react合作时，我找到了gigatables-react。

在文档中，它看起来不错，截图非常酷。但是在实施gigatables时，

我按照步骤，

-> npm i gigatables-react

＆＃13;

import React, { Component } from 'react';
import SideBar from './../account_upload/sidebar';
import { Reactables, Header } from 'gigatables-react';

var settings = {
      struct: {// all in
            search: ['top'],
            rowsSelector: ['asc', 'top', 'bottom'],
            pagination: ['bottom']
      },
      requestType: 'POST',
      ajax: '/domain_ip/',
      columns: [
            {data: "id"},
            {data: "desc"},
            {data: "title"},
            {data: "date"},
            {data: "types"},
            {data: "info"}
      ]
};

class Accounts extends Component {
    render() {
        return (
            <div style={{"display": "inline-flex"}}>
                <div className="custom_sidebar">
                    <SideBar />
                </div>
                <div className="content">
                    <Reactables settings={settings}>
                        <Header data="id">ID</Header>
                        <Header data="desc">Description</Header>
                        <Header data="title">Name</Header>
                        <Header data="date">Date</Header>
                        <Header data="types">Date</Header>
                        <Header data="info">Info</Header>
                    </Reactables>,
                </div>
            </div>
        );
    }
}

export default Accounts;

＆＃13;

这有什么问题？我在控制台中收到错误，

accountsSet-ccb24f5e97f47f7e0ca9.js:sourcemap:29807
 Uncaught TypeError: Cannot read property 'csv' of undefined
at t.value (accountsSet-ccb24f5e97f47f7e0ca9.js:sourcemap:29807)
at t.value (accountsSet-ccb24f5e97f47f7e0ca9.js:sourcemap:29807)

我如何解决这个问题？

Answer 1

STEP1：安装jQuery和Datatables节点模块npm i --save datatables.net jquery。

STEP2：导入jQuery和数据表

const $ = require('jquery');
$.DataTable = require('datatables.net');

STEP3：定义组件

class Table extends Component { 
    componentDidMount() {
        $(this.refs.main).DataTable({
           dom: '<"data-table-wrapper"t>',
           data: this.props.names,
           columns,
           ordering: false
        });
    }

    componentWillUnmount(){
       $('.data-table-wrapper')
       .find('table')
       .DataTable()
       .destroy(true);
    }

    shouldComponentUpdate() {
        return false;
    }

    render() {
        return (
            <div>
                <table ref="main" />
            </div>);
    }
}

const columns = [
    {
        title: 'Name',
        width: 120,
        data: 'name'
    },
    {
        title: 'Nickname',
        width: 180,
        data: 'nickname'
    },
];

来源integrating-react-and-datatables

如何在反应组件中构建数据表？

1 个答案: