Data with two boolean fields, can Datatable's update the data?

tgagne

Two columns are checkboxes. After the user selects/deselects them I want to be able to look at the data source to see the changed values. I intend to post the entire table source to an Ajax method for the server to do it's thing.

What's unclear is how clicking a checkbox (<input type="checkbox">) can modify the data.

From other questions and answers it looks like some kind of handler will be required to call cell().data(true/false);, but even that's unclear as to whether that will update the source data.

Basically, if the original data contains two rows with two booleans, I want the user to be able to change the value of the booleans and get the data back.

Before :

var appData = [
    { isParent : false, isChild : false, caseNumber : 100 },
    { isParent : false, isChild : false, caseNumber : 101 }
];

If the user checks 100 as the parent and 101 as the child, then I'd like to be able to get my data back to send to the server hoping it will look like...

[
    { isParent : true, isChild : false, caseNumber : 100 },
    { isParent : false, isChild : true, caseNumber : 101 }
];

Is there a straightforward way to do that?

When I grep the net for suggestions, nearly all the questions are about updating the data from outside of DataTable and not as the result of what DataTable might do /to/ the data.

Thanks in advance.

tgagne

I'm able to get it working using onclick="" functions in the render attribute like :

                        { title: "Parent", data: "isParent", orderable : false, render: function ( data, type, row ) {
                            if ( type === 'display' ) {
                                var isChecked = data == true ? "checked" : "";
                                return '<input class="isParentExclusive ' + row.id + '" type="checkbox" ' + isChecked + ' onclick="updateIsParent(this, &apos;' + row.id + '&apos;);">';
                            }
                            return data;
                        } },

But I think I may be working too hard to implement an exclusive feature so that only one row can be the parent inside that function.

            function updateIsParent(aCheckbox, anId) {
                j$('.isParentExclusive').prop('checked', false);
                j$('.' + anId).prop('checked', true);
                
                for (each of caseSearchData) {
                    each.isParent  = false;
                    if (each.id == anId)
                        each.isParent = aCheckbox.checked;                  
                }
            }

The loop at the bottom updates the value of my source data which I'll post back. I realize a map would be quicker, but the data started out as a list so I'll leave it that way for now and map it later.