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";
}