Use API to total column containing input elements

cramblda

I have a datatable with columns containing input elements where the user can key in new values. The new values are saved via ajax when the user changes the data in the input element. At the bottom of the datatable, I have a footer that has the total (sum) of all the values in each column. When the user changes the value in one of the input elements, I want to update the total at the bottom of the table for the given column the input is in. My JavaScript currently is only getting the the total of the visible cells. I am having trouble determining the correct way to loop through the column data to access the input values.

Here is a link to a live version of my table: Live Datatables

    gridTable.DataTable().column(6).data().$('input').each(function() {
        console.log($(this));
    });

This code I have written is not retrieving each cell, it seems to be retrieving all cells in the table each iteration.

cramblda

The code below seems to get the data I need. However, it returns the inputs as text, rather than a object. Is there a way to get the cell content returned as an object or to convert the text into an object?

    $.each( gridTable.DataTable().column(6).data(), function(i, cell){
          console.log(cell);
    })

cramblda

Below is what I have at the moment. It's working, but if I could do this in a better way, please let me know:

    var total = 0;    
    $.each( gridTable.DataTable().column(columnNum).data(), function(i, cell){
        var cellObject = $.parseHTML(cell);
        total += parseInt(cellObject[0].value);
    })

Related side note: For anyone else reading this and new to datatables like me, I want to add that I need to add some code to change the datatables data when the user changes one of the input field values. Currently, the data() API method has stale data (from when the table was loaded), instead of the data the user changed.

cramblda

As a followup, the code below is how I'm updating the input elements in the datatables data cache after user changes a value. It works, but seems a bit of a hack. If I could do this cleaner using the API properly, I would appreciate the feedback.

     $('table.grid').on('change', '.grid-cell', function() {

        var input = $(this);
        var gridCell = input.parent();
        var gridTable = input.closest('table.grid');

        // Update data in DataTables data cache
        var cellObject = $(gridTable.DataTable().cell( gridCell ).node()).find('input');
        cellObject.val(formatedValue);
        cellObject.attr('value', formatedValue);
        gridTable.DataTable().cell( gridCell ).data(cellObject[0].outerHTML);
    }

allan

How about the following?

$('table.grid').on('change', '.grid-cell', function() {
   var index = table.cell( this.parentNode ).index();
   var val = 0;

   $( table.column( index.column ).nodes() ).find( 'input' ).each( function () {
      val += this.value.replace( ',', '' )*1;
   } );

   // Update footer...
}

where table is the DataTable API instance for the table.

There is probably a nicer way of doing it with reduce, but I'm drawing a black on how to actually code it at the moment...!

Allan