Answers

• kthorngren Posts: 21,336Questions: 26Answers: 4,953

  October 2021

  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
• Ghost108 Posts: 19Questions: 7Answers: 0

  October 2021 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 ?
• kthorngren Posts: 21,336Questions: 26Answers: 4,953

  October 2021

  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
• Ghost108 Posts: 19Questions: 7Answers: 0

  October 2021

  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 !!
• colin Posts: 15,240Questions: 1Answers: 2,599

  October 2021

  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
• Ghost108 Posts: 19Questions: 7Answers: 0

  October 2021

  Sry for that!
  Here my case:

  http://live.datatables.net/gefonuto/1/
• colin Posts: 15,240Questions: 1Answers: 2,599

  October 2021

  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