Attaching Editor to Static indexed table filled by itterated Datatable

Lightning_young

Dear All,
I have a table that has a complex indexing. Because of this I have pre-filled the table with the index values.
I call the data in seperate ajax json and iterate the index column and fill the table. This all works great.

I want to now add inline editor to the datatable, i'm not worried about updating the data on the server I will probably do that in an additional dedicated function later, but can't work out how to get started with datatable editor.

My main issue is addressing the table cells as i get "Unable to automatically determine field from source. Please specify the field name."

Here's what I have so far.

<table class="display compact" id="table" 
<thead>
    <tr>
      <th>pn</th> <-- these values are static and hard coded in the html
      <th>number</th> <-- these values are static and hard coded in the html
      <th>info</th>
      <th>info2</th>
        </tr>
  </thead>
       <tbody>
        <tr>
          <td>21122075HB</td>
          <td >0.75</td>
          <td >&nbsp;</td>
          <td >&nbsp;</td>
         </tr>
</tbody>

var editor = new $.fn.dataTable.Editor( {
       table: '#table',
    })

$('#table').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    });

$.ajax( { //call the data here
            type: "POST",
            url: "../actions.php",
            success: function ( output ) {
                   var values = $.parseJSON( output ); //data returned is in a json 

                               var table = $(#table).DataTable();
                        table.rows().every( function ( rowIdx, tableLoop, rowLoop ) {
                         var data = this.data();
                         var pn = data[0];
                         data[2] = (values.items[pn].info); //fil third column with info from json 
                    }
               this.data( data );
                  } );
        },
        } );

$(#table).DataTable({
        "paging":   false,
        "ordering": false,
        "info":     false,
        "bFilter":  false, 
        });

Like i say the table is filling correctly, just need to add editor to it.
If any one can help with what I'm missing that would be great.
Cheers Olly

Lightning_young

Okay so I got the inline editor just about working with the following code amendments. but now the i get undefined value when iterating through the datatable. line 14-15 above...

$("#table").DataTable({
        "paging":   false,
        "ordering": false,
        "info":     false,
        "bFilter":  false, 
        "columns": [
           { data: "pn"},
           { data: "number"},
           { data: "info" },
           { data: "info2" }
            ]

and

 editor = new $.fn.dataTable.Editor( {
        table: "#table",
        fields: [ {
                label: "pn:",
                name: "pn"
            }, {
                label: "number:",
                name: "number"
            }, {
                label: "info:",
                name: "info"
            }, {
                label: "info2:",
                name: "info2"
                 }
        ]
    } );

// Activate an inline edit on click of a table cell

    $('#table').on( 'click', 'tbody td:not(:first-child)', function (e) {
        editor.inline( this );
    } );

Lightning_young

Ignore all my ramblings. It seems if you initialise editor the column names should be referenced by name not number.

var pn = data['pn'];
data['info'] = (values.items[pn].info);