auto sum of the values in the same row

auto sum of the values in the same row

Ghost108Ghost108 Posts: 19Questions: 7Answers: 0
edited October 2021 in DataTables

Hi !
this is my table:

<table id="tablePositionen" class="table-responsive table table-lg table-striped">
   <tbody>
      <tr>
         <td><input type="text" name="menge" value="1.00" /></td>
         <td><input type="text" name="preis" value="10.00 €" /></td>
         <td>SUM</td>
      </tr>
      <tr>
         <td><input type="text" name="menge" value="2.00" /></td>
         <td><input type="text" name="preis" value="20.00 €" /></td>
         <td>SUM</td>
      </tr>
   </tbody>
</table>


var tablePositionen = $('#tablePositionen').DataTable({
        "paging": false,
        "lengthMenu": [ [-1], ["All"] ]
    });  

Is there a way that the last column is the sum of "menge" and "preis" ?
It should also be possible that the sum will be dynamical recalculate if I change the value of "menge" and / or "preis".

Have you a solution for that?

Answers

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    Is there a way that the last column is the sum of "menge" and "preis" ?

    You can use columns.render to sum the columns in the row. See this example.

    It should also be possible that the sum will be dynamical recalculate if I change the value of "menge" and / or "preis".

    You will need to have Datatables update its data cache when the input is changed. See this example from this thread that shows how to use cell().invalidate() for this. The =api draw() should cause Datatables to re-render that row and update the sum.

    Kevin

  • Ghost108Ghost108 Posts: 19Questions: 7Answers: 0
    edited October 2021

    I tried this:

    $('#example').on( 'click', 'tr', function () {
       console.log( myTable.row( this ).data()[0] );
    } );
    

    Output will be:
    <td><input type="text" name="menge" value="1.00" /></td>

    But how can I get the value ?

  • kthorngrenkthorngren Posts: 20,144Questions: 26Answers: 4,736

    To get the node of a particular cell use cell().node(). Then use jQuery to perform actions with the cell, like getting the input value. Look at the examples in the docs. You would use something like this to get the cell node of the first column:

    myTable.cell( this, 0 ).node()
    

    Kevin

  • Ghost108Ghost108 Posts: 19Questions: 7Answers: 0

    Hi,

    at first: Thank you for the support !
    But I have my problems to realize it.

    Here my full code:

    <table id="tablePositionen" class="table-responsive table table-lg table-striped">
       <thead>
          <tr>
             <th></th>
             <th>Bezeichnung</th>
             <th class="text-center">Menge</th>
             <th class="text-right">Preis</th>
             <th class="text-right">Gesamt</th>
          </tr>
       </thead>
       <tbody>
          <tr>
             <td>1</td>
             <td><input type="text" name="bezeichnung" value="Description"></td>
             <td><input type="text" name="menge" value="0.00" /></td>
             <td><input type="text" name="preis" value="0.00" /></td>
             <td>0.00 €</td>
         </tr>
       </tbody>
      <tfoot>
         <tr>
            <th colspan="2"></th>
            <th></th>
            <th></th>
            <th></th>
         </tr>
      </tfoot>
    </table>
    

    **JS **

            var tablePositionen = $('#tablePositionen').DataTable({
               "footerCallback": function ( row, data, start, end, display ) {
                   var api = this.api(), data;
    
                        // Button "add Position"
                        $( api.column( 1 ).footer() ).html('<button onclick="addRow()">add Position</button>');
    
                    },
    
                    rowReorder: true,
                    columnDefs: [
                        {  targets: 0,
                             render: function (data, type, row, meta) {
                                return '<span id="s-' + meta.row + '">'+meta.row+'</span> ';
                             }
                         },
                        { orderable: false, targets: 0, visible: true},
                        { orderable: false, targets: '_all' }
                    ]
                });  
    
    
    
            function addRow() {
                tablePositionen.column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {
                     newCell = parseInt(cell.innerText) + 1;
                 } );
    
                tablePositionen.row.add( [
                     newCell,
                     '<input type="text" name="bezeichnung" value="" />', 
                     '<input type="text" name="menge" value="0.00" />', 
                     '<input type="text" name="preis" value="0.00 €" />', 
                     '0.00 €'
                 ]).draw()     
            }
    

    This is my actual situation.
    As you know, I would like to realize an auto sum of column "menge" and "preis" If the values of this input fields changed.

    Can you please show me how?
    Thank you !! :)

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    We're happy to take a look, but as per the forum rules, please link to a test case - a test case that replicates the issue will ensure you'll get a quick and accurate response. Information on how to create a test case (if you aren't able to link to the page you are working on) is available here.

    Cheers,

    Colin

  • Ghost108Ghost108 Posts: 19Questions: 7Answers: 0

    Sry for that!
    Here my case:

    http://live.datatables.net/gefonuto/1/

  • colincolin Posts: 15,112Questions: 1Answers: 2,583

    I see, thanks. Yep, Kevin's explanation is the way to go - use cells().node() to get the nodes, for example cells('*', 2) will return all the nodes for column two. You would then iterate through that list, and sum the values use val() on each node,

    Colin

Sign In or Register to comment.