DataTables Editor add inline value change to JavaScript variable.
DataTables Editor add inline value change to JavaScript variable.
bbrindza
Posts: 300Questions: 69Answers: 1
Given the table below, I would like to total each month into a variables to be used in the Totals span of the table as the user key out of the inline input.
Here is my table code.
// Set inline cell as selected to immediately start typing in new value
editor.on('open', function () {
$('div.DTE input')[0].select();
});
childTable3 = $('#budgetRows_' + id).DataTable({
createdRow: function ( row, data, index ) {
$('td', row).eq(1).attr('id', id+ '_janBudget');
$('td', row).eq(2).attr('id', id+ '_febBudget');
$('td', row).eq(3).attr('id', id+ '_marBudget');
$('td', row).eq(4).attr('id', id+ '_aprBudget');
$('td', row).eq(5).attr('id', id+ '_mayBudget');
$('td', row).eq(6).attr('id', id+ '_juneBudget');
$('td', row).eq(7).attr('id', id+ '_julyBudget');
$('td', row).eq(8).attr('id', id+ '_augBudget');
$('td', row).eq(9).attr('id', id+ '_septBudget');
$('td', row).eq(10).attr('id', id+ '_octBudget');
$('td', row).eq(11).attr('id', id+ '_novBudget');
$('td', row).eq(12).attr('id', id+ '_decBudget');
},
dom: 't',
ajax: {
type: 'POST',
url: 'ssp_getSalepersonByCustomerBillTo_BudgetData.php',
data: { locationCode:locationCode,
salespersonGroupingNumber: salespersonGroupingNumber,
customerNumber: customerNumber,
productNumber: productNumber
},
},
serverSide: true,
order: [ 1, 'asc' ],
keys: {
columns: ':not(:first-child, .markCompleteButton)',
keys: [ 9 ],
editor: editor,
editOnFocus: true
},
columns: [
{
data: null,
searchable: false,
orderable: false,
className: 'budgetRowTitle',
render: function ( data, type, row ) {
return '<td><b>Next Year Budget</b></td>';
}
},
{ data: 'BD$01', "width": "100px" },
{ data: 'BD$02', "width": "109px"},
{ data: 'BD$03', "width": "99px"},
{ data: 'BD$04', "width": "108px"},
{ data: 'BD$05', "width": "101px"},
{ data: 'BD$06', "width": "100px"},
{ data: 'BD$07', "width": "104px"},
{ data: 'BD$08', "width": "100px"},
{ data: 'BD$09', "width": "110px"},
{ data: 'BD$10', "width": "100px"},
{ data: 'BD$11', "width": "102px"},
{ data: 'BD$12', "width": "100px"},
{
data: null,
className: 'totalBudgetTD',
render: function(data, type, row) {
return '<span id="totalBudgetSpan">0.0</span>';
}
},
// ** Mark Completed Button
{
data: null,
searchable: false,
orderable: false,
className: 'markCompleteButton',
render: function ( data, type, full, meta ) {
if( full.SYNCFL == 'N'){
return '<button id="markBudgetRecordCompletedButon_'+ full.PKLOC + full.PKGRP + full.PKCUST + full.PKPROD +'"class="btn btn-primary btn-xs" onclick="showMarkBudgetRecordCompletedModal(\''+ full.PKLOC +'\', \''+ full.PKGRP +'\', \''+ full.PKCUST +'\', \''+ full.PKPROD +'\' )">Mark Completed</button>';
}else{
return '';
}
}
},
],
columnDefs: [
{ targets: "_all", orderable: false}
],
select: {
style: 'os',
selector: 'td:first-child'
},
} );
This question has an accepted answers - jump to answer
Answers
In your renderer for that column you'd add up the values from the row - e.g.:
Allan
Allan,
This basically just substring the individual inputs as the return.
ie. Next Year Budget 5.9 8.9 7.7 6.5 45.0 8.8 4.6 5.5 2.8 8.9 6.9 3.9
5.98.97.76.545.08.84.65.52.88.96.93.9
Oh of course - they are strings. You need to cast them as floats (i.e.
parseFloat()).Probably best to use a for loop to keep the code small:
Should do it.
Allan
Ah, that would make sense. These columns in the DB2 table are defined as numeric.
I need to remember that in DataTables it is not. Thanks for reminder.
It is based on the JSON that is sent from the server. If it were
"BD$01": 3.4then it would be a number, but it must be"BD$01": "3.4". That will be coming from the DB2 driver in PHP (presumably to avoid IEEE number rounding errors since the data is numeric). To that end, you might want to doreturn sum.toFixed(1);.Allan