Answers

• htwyford Posts: 23Questions: 9Answers: 1

  June 2017

  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 Posts: 9Questions: 3Answers: 0

  June 2017

  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 Posts: 730Questions: 0Answers: 119

  June 2017

  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 Posts: 9Questions: 3Answers: 0

  June 2017

  @bindrid - Sounds good! Do you happen to have an exmple?
• Ogrehulk Posts: 9Questions: 3Answers: 0

  June 2017

  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 Posts: 730Questions: 0Answers: 119

  June 2017

  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 Posts: 9Questions: 3Answers: 0

  June 2017

  @bindrid - That would be SO AWESOME of You! THANKS!!!
• bindrid Posts: 730Questions: 0Answers: 119

  June 2017

  almost done. Beer slowed me down
• bindrid Posts: 730Questions: 0Answers: 119

  June 2017 Answer ✓

  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 Posts: 9Questions: 3Answers: 0

  June 2017

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