Regarding inline edit and save using react jquery datat source datatables

nnshetty

Please help me in adding inline edit and save using react-jquery-datatable [data source]
import React, {Component} from 'react';

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


export default class Datatable extends Component {

  componentDidMount() {

    console.log(this.element)
    this.$element = $(this.element)
    this.$element.DataTable(
      {
        data: this.props.data,
        columns: [

          {title: "Key",width: '50%'},
          {title: "Value"},

        ],columnDefs: [
          { "width": "20%", "targets": 0 }
          ]
      }
    )
  }
  componentWillUnmount() {
    if (this.$el.Datatable) {
      this.$el.Datatable.destroy();
    }
  }

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

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

colin

Hi @nnshetty ,

Is this using Editor?

Cheers,

Colin

nnshetty

Yes @colin ....i need to make use of editor in reactjs... I saw that whatever u sent..however that does not have a proper tutorial as to how to incorporate that using reactjs

nnshetty

import React, {Component} from 'react';
import {Editor} from "datatables.net-editor-server";

const $ = require('jquery');
$.DataTable = require('datatables.net')
// import editor from 'datatables.net-editor';
// var editor = new $.fn.dataTable.Editor();



export default class NewTable extends Component {

   // use a global for the submit and return data rendering in the examples
  edit =() => {

    editor = new $.fn.dataTable.Editor({
      ajax: "../php/staff.php",
      table: "#example",
      fields: [{
        label: "First name:",
        name: "first_name"
      }, {
        label: "Last name:",
        name: "last_name"
      }, {
        label: "Position:",
        name: "position"
      }, {
        label: "Office:",
        name: "office"
      }, {
        label: "Extension:",
        name: "extn"
      }, {
        label: "Start date:",
        name: "start_date",
        type: "datetime"
      }, {
        label: "Salary:",
        name: "salary"
      }
      ]
    });
  }
update = () =>{
  this.$element = $(this.element)
  this.$element.DataTable(
    {
      data: this.props.data,
      columns: [

        {title: "Key",width: '50%'},
        {title: "Value"},

      ],

      columnDefs: [
        { "width": "20%", "targets": 0 }
      ],
      buttons: [
        { extend: "create", editor: editor },
        { extend: "edit",   editor: editor },
        { extend: "remove", editor: editor }
      ]
    }
  )
}

componentDidMount(){
    this.edit();
  this.update();
}
componentDidUpdate(){
  this.update();
}
render() {

  return (
    <div className="App">
      <table id="example" className="display nowrap" cellSpacing="0" width="100%">
        <thead>
        <tr>
          <th></th>
          <th>First name</th>
          <th>Last name</th>
          <th>Position</th>
          <th>Office</th>
          <th width="18%">Start date</th>
          <th>Salary</th>
        </tr>
        </thead>
      </table>

      {/*<script type="text/javascript"> $("#example").dataTable </script>*/}
    </div>
  );
}
}

Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

nnshetty

it errors out :TypeError: $.fn.dataTable.Editor is not a constructor

colin

Hi @nnshetty ,

It will say that when it can't load the Editor library - this could be because the license has expired, if you downloaded it more than two weeks ago.

These threads might help: here and here.

Could you look at those, please, and report back if problems persists.

Cheers,

Colin