DataTables Editor add inline value change to JavaScript variable.

bbrindza

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'
             },

         } );

allan

In your renderer for that column you'd add up the values from the row - e.g.:

var sum = full['BD$01'] + full['BD$02'] + ...;

return sum;

Allan

bbrindza

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

allan

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:

var sum = 0;
for (var i=1 ; i<13 ; i++) {
  sum += parseFloat(full['BD$' + (i<10 ? '0' : '') + i]);
}
return sum;

Should do it.

Allan

bbrindza

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.

allan

It is based on the JSON that is sent from the server. If it were "BD$01": 3.4 then 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 do return sum.toFixed(1);.

Allan