cld2_react/src/common/dataTable/index.js

import React, { PureComponent } from 'react';
import { connect } from 'react-redux';
import * as config from '../config.js';
const $ = require('jquery');
$.DataTable = require('datatables.net');


let dt = null;
let propsobj=null;
class dataTable extends PureComponent {
    // constructor(props){
    //     super(props);
    //     this.handleColumnVisible=this.handleColumnVisible.bind(this);
    // }

    render() {
        const { columnsData } = this.props;
        return (
            <div>
                <table ref={el => this.el = el} className="table table-bordered table-hover table-striped w-100">
                    {/* <thead dangerouslySetInnerHTML={{__html: this.props.thead}} />  */}
                    <thead>
                        <tr>
                            {
                                columnsData.map((item,index) => {
                                    //console.log(item.get('联系人'));
                                    return (<th key={index}>{item.get('columnsName')}</th>)
                                })
                            }
                        </tr>
                    </thead>
                </table>
            </div>
        );
    }

    componentDidMount() {
        this.props.onRef(this);
        propsobj=this.props;
        this.$el = $(this.el);
        dt = this.$el.DataTable(
            {
                "language": {
                    "paginate": {
                        "next":       "&nbsp;&nbsp;",
                        "previous":   "&nbsp;&nbsp;"
                    },
                },
                ordering: false,
                processing: true,
                serverSide: true,
                responsive: true,
                autoWidth: true,
                info: false,
                searching: true,
                dom: 'lBrtip',
                lengthChange: false,
                
                'ajax': {
                    url: config.CLD2API + this.props.url,
                    type: 'get',
                    "dataSrc": function ( res ) {
                        let bindDataEvend=propsobj.columnBindEvent(res);
                         return bindDataEvend.data;
                      }
                },
                columns: this.props.columns,
            }
        );

        // td2.clear();
        //console.log(td2.search('123', false, false));

        //td2.row.add({ 'DT_RowId': '0', 'clientname': '21dd23' });
        //td2.draw();
        //console.log($.DataTable.column(2));
        //this.$el.dataTable().search('123').draw();
        //dt.search('123').draw();
    }

    handleSearch(filter) {
        dt.search(JSON.stringify(filter)).draw();
        // console.log(value);
    }
    handleColumnVisible(index,visible){
        //console.log(index);
        // let visible=localStorage.getItem('contact_client_Column_'+index);
        //console.log(visible);
        
        // let column=dt.columns(index);
        // console.log(column.visible());
        // //console.log(!column.visible());
        // column.visible(false);


        // setTimeout(() => {
        //     console.log('dd');
        //     column.visible(1);
        //   }, 350);

        let column=dt.columns(index);
        //column.visible(visible);
        //let visible=1;
        let boolVisible=true;
        if(visible==='false'||visible===false){
            boolVisible=false;
        }
        if(boolVisible){
            column.visible(1);
        }else{
            column.visible(0);
        }
        
        //column.visible(visible);
    }

}

const mapStateToProps = (state) => {
    return {
    }
}

const mapDispathToProps = (dispatch) => {
    return {
        ddd(){

        }
    }
}


export default connect(mapStateToProps, mapDispathToProps)(dataTable);
//export default dataTable;