DataTables Editor add inline value change to JavaScript variable.

DataTables Editor add inline value change to JavaScript variable.

bbrindzabbrindza Posts: 303Questions: 70Answers: 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

  • allanallan Posts: 62,205Questions: 1Answers: 10,205 Site admin

    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

  • bbrindzabbrindza Posts: 303Questions: 70Answers: 1

    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

  • allanallan Posts: 62,205Questions: 1Answers: 10,205 Site admin
    Answer ✓

    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

  • bbrindzabbrindza Posts: 303Questions: 70Answers: 1
    edited May 2023

    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.

  • allanallan Posts: 62,205Questions: 1Answers: 10,205 Site admin

    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

Sign In or Register to comment.