Editor (2)

jmore

I seem to have run into another wrinkle with the behaviour of the editor. I believe it is related to my previous post titled 'Editor'.

The problems is:
When using the bubble edit functionality I start at the first row(1) and the edit is properly recorded. The second row(2) also behaves as expected. If I then leave a gap after the second row(2) edit and edit another row(5) it behaves as expected. Now when I return to row(1) or any previously edited row the last edit I made(row 5) is presented in the edit dialogue and if I change it the last row(5) I edited is updated. If I then edit a row that has never been edited it works as expected in that the dialogue is presented with the cell data. The behaviour is the same when I use a checkbox, and an edit button and do the editing through a form.
When it misbehaves the data content that gets passed into the function is from the last edited console.log("the row ",t.row( this ).data()); while the row index console.log("the row ",t.row( this ).index()); is correct and does not match the data.

The site is still available at

https://tmtest.dlinkddns.com:10010
Sign In with
user - datatables
password - 1234

The Editor Definition

   editor = new $.fn.dataTable.Editor( {
        table: "#myTable",
        fields: [
            {type: "readonly", label: "depotName", name: "depotName" } ,
            {type: "readonly",label: "clientName", name: "clientName"},
            {type: "readonly",label: "rtuName", name: "rtuName"},
            {type: "readonly",label: "deviceName", name: "deviceName"},
            {type: "readonly",label: "serialNumber", name: "serialNumber"},
            {type: "readonly",label: "assetNumber", name: "assetNumber" },
            {label: "serviceTag", name: "serviceTag"},
            {type: "readonly",label: "location", name: "location" },
            {type: "readonly",label: "ipAddress", name: "ipAddress"},
            {type: "readonly",label: "deviceType", name: "deviceType"},
            {type: "readonly",label: "deviceStatusMessage", name: "deviceStatusMessage" },
            {type: "select", label: "quiesce", name: "quiesce", options: quiesceOpts },
            {type: "readonly",label: "utilization", name: "utilization" },
            {type: "readonly",label: "coverage", name: "coverage"},
            {type: "readonly",label: "monoLifeCount", name: "monoLifeCount" },
            {type: "readonly",label: "colorLifeCount", name: "colorLifeCount"},
            {type: "readonly",label: "pageCountThisMonth", name: "pageCountThisMonth"},
            {type: "readonly",label: "createdDate", name: "createdDate"},
            {type: "readonly",label: "lastActiveDate", name: "lastActiveDate" },
            {type: "readonly",label: "deviceId", name: "deviceId"}
        ],
        ajax: function ( method, url, d, successCallback, errorCallback ) {
            var output = { data: [] };
            if ( d.action === 'edit' ) {
                  // Update each edited item with the data submitted
                $.each( d.data, function (id, value) {
                   //console.log(findIndexInData(theTable.data, 'deviceId', id));
                   console.log("in edit -id ",id," -value ",value);
                   value.DT_RowId = id;
                   $.extend( todo, value );
                   console.log("todo after extend ",todo);
                   console.log("output before push ",output);
                   output.data.push( todo );
                } );
            }
             // Store the latest `todo` object for next reload
            localStorage.setItem( 'todo', JSON.stringify(todo) );
console.log("the final output ",output);
            // Show Editor what has changed
            successCallback( output );
        }
    } );

The table definition

var editor; // use a global for the submit and return data rendering in the examples
// make sure to modify the column formating info in the datatables init structures
function buildTable()
{
    // Create or update the todo localStorage entry
    if ( localStorage.getItem('todo') ) {
        todo = JSON.parse( localStorage.getItem('todo') );
    }


    // Activate an inline edit on click of a table cell
    $('#myTable').on( 'click', 'tbody td:not(:first-child)', function (e) {
        console.log("the row ",t.row( this ).data());
        console.log("the row ",t.row( this ).index());
        $.extend( todo, t.row( this ).data() );
        editor.bubble( this );
        console.log(t.row);
    } );

    console.log("table is new");
    var t = $('#myTable').DataTable( {
     "destroy": true,
       "data": theTable.data,
       "columns": [
            {"data": "depotName"}, {"data": "clientName"}, {"data": "rtuName"}, {"data": "deviceName"}, {"data": "serialNumber"}, {"data": "assetNumber"},
            {"data": "serviceTag"}, {"data": "location"}, {"data": "ipAddress"}, {"data": "deviceType"}, {"data": "deviceStatusMessage"}, {"data": "quiesce"},
            {"data": "utilization"}, {"data": "coverage"}, {"data": "monoLifeCount"}, {"data": "colorLifeCount"}, {"data": "pageCountThisMonth"},
            {"data": "createdDate"}, {"data": "lastActiveDate"}, {"data": "deviceId"}
        ],
        "columnDefs":
        [
           {
            orderable: false,
            className: 'select-checkbox',
            targets:   0
           },
          { className: "dt-right", "targets": [12,13,14,15,16]}
        ],
        select: {
            style:    'os',
            selector: 'td:first-child'
        },
     "buttons" :
       [
          'colvis',
         { extend: "edit",   editor: editor },
         {
           extend: 'collection',
           text: 'Export',
           buttons:
           [
             { extend: 'print', exportOptions: { columns: [ ':visible' ]}},
             { extend: 'copyHtml5', exportOptions: { columns: [ ':visible' ]}},
             { extend: 'csvHtml5', exportOptions: { columns: [ ':visible' ]}},
             { extend: 'pdfHtml5', exportOptions: { columns: [ ':visible' ]}}
           ]
         }
       ]
    });
    t.buttons().container()
     .appendTo(document.getElementById("buttonPlacement"));
   document.getElementById("deviceTable").style.display="inline";
}

allan

I'm fairly certain that it is being caused by this line in the ajax override:

$.extend( todo, value );

todo is always being set to the latest values, but only a single row - there is no row seperation there.

If you have a look at my localStorage example I use todo[ id ] = value; - i.e. the row information is contained within an object in the todo object (identified by the row id).

Allan

jmore

Allan,
Your suggestion; while not the the only problem I found certainly pointed me in the right direction. The root of the problem I experienced; besides my lack of experience, was that I was looking at two of your examples to model my implementation and I did not fully understand either of them. I had removed the create and delete portions of the editor definition and that left me with no todo data at all. Adding some code to both the bubble edit onclick function and the form edit function along with your suggestion cured most of the problems. I am now left with figuring out how to get some fields from my original javascript object into the todo variable as well as figuring out exactly which fields were edited. Then there is all the other stuff to do with editing like the editor form field types etc.
Thank you for your support and understanding.

John