auto sum of the values in the same row

Ghost108

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?

kthorngren

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

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

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

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

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

Sry for that!
Here my case:

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

colin

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