updating a total column in an editable row

johncscott

separating out the #2 point from this
http://datatables.net/forums/discussion/comment/47691#

[quote][quote]2) i'd like to make it so that when you commit a change in the keytable the total colum is updated in javascript, is there a way to get a reference to this "row[2]" to update when the keytable is submitted, i've thought about knockout but that may overcomplicate and also not sure how to make the underlying mData observable[/quote]

I couldn't actually see where the total column is calculated - it doesn't appear to be a callback that is registered to the data table - is it part of the data? If it is part of the data, then you'd need to use fnUpdate to update the data for the table.[/quote]

relating to this example
http://gstest.c3x.co/meals.html
(requiring you to click on a link eg ambulance in the 2nd table to see the 3rd)

in the third table you can edit a value
but when the value is changed i'd like the total (row[2]) to update
at initialisation the total is calculated server side
but on editing a cell with keytable/jeditable i need to then recalculate the total for the row
~i'd also like to update a column total too but i'll wait till the row works first :)

the first idea i had was to use knockout and somehow make the array source of the datatable observable
and then calculate the total column when the observable alters (ie you change a row)
but before embarking on that odyssey i thought i should investigate if there is something already here i can use

so I have the following javascript presently to initialise the keytable / jeditable

[code]
var keys = new KeyTable( {
"table": document.getElementById('crew')
} );

/* Apply a return key event to each cell in the table */
keys.event.action( null, null, function (nCell) {
/* Block KeyTable from performing any events while jEditable is in edit mode */
keys.block = true;

/* Initialise the Editable instance for this table */
$(nCell).editable( function (sVal) {
/* Submit function (local only) - unblock KeyTable */
keys.block = false;
$(nCell).editable('destroy');
return sVal;
}, {
"placeholder" : "",
"onblur": 'submit',
"onreset": function(){
/* Unblock KeyTable, but only after this 'esc' key event has finished. Otherwise
* it will 'esc' KeyTable as well
*/
$(nCell).editable('destroy');
setTimeout( function () {keys.block = false;}, 0);
},
onsubmit: function(settings, td) {
var input = $(td).find('input');
$(this).validate({
rules: {
'value': {
number: true
}
},
messages: {
'actionItemEntity.name': {
number: 'Only numbers are allowed'

}
}
});
[/code]

and so the questions i am wondering about are:

1] in the above would you ( & where) add some code to fire after a valid entry had been made

it feels like the obvious place to put this is in the
[code] onsubmit: function(settings, td) {
var input = $(td).find('input'); ... [/code]

what i find most difficult to grasp is how you would get from "td" to the datatable row
but maybe this is not needed

2] is there an appropriate place (possibly somewhere in the datatable initialisation) to create a function that updates the total column adding together all the row values, what function would be used for this. can it somehow be atomic?

i must admit i'm relatively new to javascript
and so wrt
[quote]
I couldn't actually see where the total column is calculated - it doesn't appear to be a callback that is registered to the data table
[/quote]

3] i'm not sure what a callback is
is this be some kind of function that is called when the data is changed
that can then update the second column
if that's atomic to the table then i guess it doesn't matter to know where the change came from
and is there an equivalent for column totalling?
i'll do some more reading :)

allan

> 1] in the above would you ( & where) add some code to fire after a valid entry had been made

Yes - in the submit function. The code looks incomplete above - are you calling fnUpdate to update the DataTable with the new value? That you need to do first.

Then, remember that your have nCell - a reference to the TD element that is being edited - it has been passed through from the KeyTable action event. So with `nCell.parentNode` you have a reference to the TR as well as the TD element. You can then do an update call on the data in the sum column.

> 2] is there an appropriate place (possibly somewhere in the datatable initialisation) to create a function that updates the total column adding together all the row values

Yes - fnFooterCallback is designed for exactly this. Currently you'll likely want the fnGetColumnData plug-in (1.10 will include something similar built in) to get the data for the column in question and you can then update the footer with the data. Example: http://datatables.net/release-datatables/examples/advanced_init/footer_callback.html

> 3] i'm not sure what a callback is. is this be some kind of function that is called when the data is changed

It is a function that is executed when something occurs. For example, the footer callback is run when the footer is drawn.

Is the total column currently being calculated by the server, or in Javascript, I guess is what my question was aiming at. I couldn't see it being done in Javascript - although it might be possible using fnRowCallback and save yourself a second call to fnUpdate (above).

> the first idea i had was to use knockout and somehow make the array source of the data table observable [...] but before embarking on that odyssey i thought i should investigate if there is something already here i can use

DataTables 1.9- will not work with observable objects due to the way it handles data. 1.10 will (in fact it already should - although I'm not actually tried it yet). So if you want to use observable objects, you'd need to use the 1.10 code that is in git - and that's rather unstable at the moment witht he number of changes going into the API. It should firm up soon.

Allan

johncscott

these answers all perfectly answered the questions
thank you