Hello,
I am trying to let utility clients update route and sequence numbers in a table for meter readings. I am using inline editing. When the client selects a line, enters the updated information and tabs, Editor is not getting the correct index of the line. Therefore it is updating the wrong record. An example is they type a value in the search, but it always updates the first row in the datatable. This is especially bad when they use the search function since they have hundreds of records. Below is the code I am using to select the index and update the row. If anyone could help me I would appreciate it. I cannot provide a link to the page as it is a secure site and the datatable is populated via Ajax call to the database.
editor = new $.fn.dataTable.Editor
({
table: "#RouteSequenceOrderTable",
idSrc: "PIDN",
search: 'false',
fields:
[
{
label: "Route:",
name: "Route"
},
{
label: "Sequence:",
name: "Sequence"
}
],
});
var cell;
// Activate an inline edit on click of a table cell
$('#RouteSequenceOrderTable').on('click', 'tbody td', function (e)
{
cell = this;
editor.inline(table.cell(this).index(), {
onBlur: 'submit'
});
});
editor.on('preSubmit', function (e, data, action)
{
var index = table.cell(cell).index().row;
var row = table.row(index, { order: 'index' }).data();
// Create a deep copy of row
var newRow = JSON.parse(JSON.stringify(row));
// Get key
var keys = Object.keys(data.data);
var secondSetOfKeys = Object.keys(data.data[keys[0]]);
// Use key to set data in row object
switch (secondSetOfKeys[0])
{
case "Route":
newRow.Route = data.data[keys[0]].Route;
break;
case "Sequence":
newRow.Sequence = data.data[keys[0]].Sequence;
break;
default:
}
var table = $("#RouteSequenceOrderTable").DataTable
({
data: data,
responsive: true,
destroy: true,
paging: false,
dom: 'Bfrtip',
"columnDefs":
[
{ "orderData": [0, 1]},
],
"order": [[0, 'asc'], [1, 'asc']],
keys:
{
columns: [0,1],
keys: [9],
editor: editor,
editOnFocus: true
},
buttons:
[
{
extend: 'excelHtml5',
title: 'Route And Sequence'
},
],
columns:
[
{ data: 'Route' },
{ data: 'Sequence', type: "num" },
{ data: 'Address' },
{ data: 'City' },
{ data: 'State' },
{ data: 'Zip' },
{ data: 'PropertyStatus' },
{ data: 'PIDN' },
{ data: 'OwnerName' },
{ data: 'Service' },
{ data: 'Cycle' },
{ data: 'SerialNumber' },
{ data: 'ServiceStatus' }
],
})
Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
etc. Is there a way around this? Users are unable to tell which value was selected from the dropdown menu.Thanks.
