Saving Multiple Rows after Editing Cells

Ogrehulk

I have a table with an input, select and two check boxes in each row for the user to manipulate.I also have a save button not attached to the datatable in any way other than to call a function.

The table builds and populates as it should.

The user has the options to change multiple values among multiple rows using the above form items. After satisfied with their changes, they then click on a save button.

In my function, I use ' table.rows().every(function ...' method. The data showing for each is all the initial data without any changes that were made.

How can I read the table's 'current' state with changes? I have tried using stateSave thinking that might have something to do with it. Also, I have tried to serialize the table data before the loop. But I cannot seem to figure out what needs to be included, changed definitively to make sure that my edits are passed.

htwyford

I believe you'd need Editor if you wanted to access form elements as a part of the DataTable data set.

You could probably look through each cell as you're doing, but then access the data in the input with jQuery: $(this).val, or something along those lines.

Of course, to send the data back in one big set, you'd have to build that set yourself, since DataTables wouldn't construct a set from your form inputs automatically.

I'm certainly not an expert on this, so I might be wrong!

Ogrehulk

Thanks for the quick reply. Using Editor is not an option for this project. Could you please expand upon how, when looking at a row, how I might utilize $(this).val ?

bindrid

Your controls that allow to change the data in the table should also update the data object associated with that row. You can use an 'change' event handler to trigger that update.

I do something like that where my data object has a hasChanged field in the dataset that is set to true if the user changes anything in that row.

Then when the user hits the save button, my code creates a new data object populated with each data object that has been marked changed and sends that back to the server for update.

Ogrehulk

@bindrid - Sounds good! Do you happen to have an exmple?

Ogrehulk

I also wanted to expound with code so below is what I have:

HTML
<table id="MainTable"><thead><tr>
    <th>Position</th>
    <th>Priority</th>
    <th>IsSelected</th>
    <th>IsApproved</th>
</tr></thead></table><br />
<input type="button" value="Save Changes" onClick="SaveData()" />

JavaScript
function PopulateTable(ds){
    var myTable;
    myTable = $('#MainTable').dataTable({
        bFilter:true,
        data:ds,
        columns:[
        {
            data: "Position",
            type: "Sting",
            targets: 0,
            render: function(data, type, row){
            return '<input type="text" value="' + data + '" size="2" maxlength="3" />'
        }
    },
...
};

function SaveData(){
    var myTable;
    myTable = $('#MianTable').DataTable();
    myTable.rows().every(function(rowIdx,tableLoop,rowLoop){
        var data = this.data();
        var a = data.IsApproved //check box
        var b = data.Priority //select
        var c = data.Position //input
        var d = data.IsSelected //check box
    });
};

When getting the data from the table on the save function, the changes made are either the same before the changes or if they were empty, they comeback null. but no changes are passed through.

bindrid

I do, but it is not 100%. If you are not in a hurry, I can fix it up and link it to you tonight after work.

Ogrehulk

@bindrid - That would be SO AWESOME of You! THANKS!!!

bindrid

almost done. Beer slowed me down

bindrid

http://jsbin.com/yafuvah/edit?js,output

1. I don't use checkboxes to indicate changed. I used Font Awesome icons and color coded them with css to indicate its status (added, changed or deleted).
2. I used buttons to put a row in edit mode. You cannot deselect the row until you take it out of edit mode.
3. Pay attention to the Assess action button. This is where the work is done in fetching the data and sending it back to the server for an update. All changes sent at once.

Feel free to ask question.

Scott

ps. I did not make it bullet proof.

Ogrehulk

This will get me where I need to end up. THANK YOU SO MUCH!