Wrong number of column during edit

Floriane

Hi,

I have a problem on using inline and form Editor with the number of column. In fact, first column is dedicated to checkboxes and have no data source.

My table initialisation :

var editor = new $.fn.dataTable.Editor( {
    table: '#myTable',
    fields: globalInitFieldEditor,
    ajax: function ( method, url, data, success, error ) {
        if ( data.action === 'create' || data.action === 'edit') {
            $.ajax( {
                type: 'POST',
                url:  "modify.php",
                data: {datas: JSON.stringify(data)},
                success: function (json) {
                    //alert('SUCCESS EDIT : '+json);
                    success( JSON.parse(json) );
                },
                error: function (xhr, error, thrown) {
                    //alert('ERROR : '+xhr+' || '+error+' || '+thrown);
                    error( xhr, error, thrown );
                }
            } );
        }
        else if ( data.action === 'remove' ) {
            $.ajax( {
                type: 'POST',
                url:  "delete.php",
                data: {datas: JSON.stringify(data)},
                success: function (json) {
                    success( JSON.parse(json) );
                },
                error: function (xhr, error, thrown) {
                    //alert('ERROR : '+xhr+' || '+error+' || '+thrown);
                    error( xhr, error, thrown );
                }
            } );
        }
    }
});

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

var table = $('#myTable').DataTable({
    dom: 'T<"clear">lfrtip',
    order: [ 1, 'asc' ],
    columnDefs: [    { "orderable": false, "targets": 0 }  ],
    tableTools: {
        "sSwfPath": "swf/copy_csv_xls_pdf.swf",
        "aButtons": [             
        { 
            "sExtends": "editor_create", 
            editor: editor 
        },
        { 
            "sExtends": "editor_edit",  
            editor: editor 
        },
        { 
            "sExtends": "editor_remove", 
            editor: editor 
        }        
        sRowSelect: "multi",
        sRowSelector: 'td:first-child'
    }
});

globalInitFieldEditor is a global variable that contain the fields declaration. Because my database structure can change, I generate dynamically that fields declaration. It looks like :

[
    { "label":"Nom donnée :","name":1,"type":"select","options":[
        { "label":"","value":"" },
        { "label":"A","value":"A" },
        { "label":"B","value":"B" },
        { "label":"C","value":"C" },
        { "label":"D","value":"D" },
        { "label":"E","value":"E" }
    ]},
    { "label":"Valeur :","name":2,"type":"select","options":[
        { "label":"","value":"" },
        { "label":"1","value":"1" },
        { "label":"2","value":"2" },
        { "label":"3","value":"3" },
        { "label":"4","value":"4" }
    ]},
    { "label":"Origine :","name":3,"type":"select","options":[
        { "label":"","value":"" },
        { "label":"a","value":"a" },
        { "label":"b","value":"b" },
        { "label":"c","value":"c" },
        { "label":"d","value":"d" },
        { "label":"e","value":"e" }
    ]},
    { "label":"Clé :","name":4},
    { "label":"Encodage :","name":5,"type":"select","options":[
        { "label":"","value":"" },
        { "label":"FLOAT16","value":"FLOAT16" },
        { "label":"INT32","value":"INT32" },
        { "label":"POSINT","value":"POSINT" }
    ]},
    { "label":"Position :","name":6},
    { "label":"Commentaire :","name":7,"type":"textarea" }
]

And my HTML :

<table id="myTable" class="display cell-border">   
   <thead>
        
        <tr>
            <th></th>
            <th class="dt-head-center" >Nom donnée</th>
            <th class="dt-head-center" >Valeur</th>
            <th class="dt-head-center" >Origine</th>
            <th class="dt-head-center" >Clé</th>
            <th class="dt-head-center" >Encodage</th>
            <th class="dt-head-center" >Position</th>
            <th class="dt-head-center" >Commentaire</th>
        </tr>
    </thead>
    <tbody>
        <tr id="row_1">
            <td></td>
            <td>A</td>
            <td>1</td>
            <td>a</td>
            <td>2596</td>
            <td>FLOAT16</td>
            <td>0</td>
            <td></td>
        </tr>
        <tr id="row_2">
            <td></td>
            <td>B</td>
            <td>2</td>
            <td>a</td>
            <td>47826</td>
            <td>FLOAT16</td>
            <td>1</td>
            <td></td>
        </tr>
        [...]
    </tbody>
</table>

My problem occured when I use the Edit button. The value is updated correctly on table, but during the success method this error is fired :

DataTables warning: table id=myTable - Requested unknown parameter '0' for row 6. For more information about this error, please see http://datatables.net/tn/4

I've seen the manual, and I suppose it's because the number of cells in the table does not satisfy the equation #cells = #columns * #rows (i.e. there are more columns defined in the header than in the table body, or vice-versa).

With Firefox debugger, I find at that point (dataTables.editor.js) :

var row = dt.row( identifer );
if ( data === null ) {
    row.remove().draw( false );
}
else {
    row.data( data ).draw( false );
    __dtHighlight( row.node() );
}

dt.row[0] contains "[3,4,5,6,7,0,1,2]", and identifer equal 6.

data is well formed : Object { 1: "A", 2: "1", 3: "a", 4: "2597", 5: "FLOAT16", 6: "0", 7: "", DT_RowId: "row_7" }

row.data() contains : Array [ "", "A", "1", "a", "2596", "FLOAT16", "0", "" ]

The error is triggered at line row.data( data ).draw( false );. It's clearly a problem with columns number. But how can I correct that ?

allan

The data object doesn't include a 0 option - hence the error. If you want DataTables to use a default value instead use the columns.defaultContent option and set it to be an empty string.

Allan

Floriane

Thanks Allan,

I just complete the definition for the first column :

columnDefs: [    { "data": null, "defaultContent": "", "orderable": false, "targets": 0 }  ],

and row.data() contains 7 and no 8 entries.