Answers

• allan Posts: 61,642Questions: 1Answers: 10,093 Site admin

  February 2015 Answer ✓

  Hi,

  This is correct and expected behaviour from the code at the moment. I'm going to introduce a new option into the next major version that will stop this from happening.

  Regards,
  Allan
• ksoldink Posts: 5Questions: 1Answers: 0

  February 2015

  Thanks for the response, allan. Really looking forward to this feature! As a workaround for now, how would you suggest limiting the data passed to the server to JUST the field being edited?

  Thanks, _K
• ksoldink Posts: 5Questions: 1Answers: 0

  February 2015 edited February 2015

  So after some trial and error, I've come up with a decent method of doing this!

  First of all, my DataTable is being populated from the DOM. Each cell has an HTML5 data attribute:

  <td id="ID586-email" name="ID586-email" data-dtype="email">email@email.com</td>
  

  So that has an attribute data-dtype with the value email. A different cell will have a different value, say name or phone, etc.

  Here's my jQuery that handles a cell click on my table:

  $('#table').on( 'click', 'tbody td', function (e) {
      var dtype = this.getAttribute('data-dtype');
      editor
          .title( 'Edit')
          .buttons ({
              label: "Update",
              fn: function() {
                  this.submit(null, null, function(data) {
                      data.dtype = dtype;
                      data.etype = 'bubble';
                  })
              }
          })
          .bubble(this, {
              buttons: true
          });
  });
  

  Line 2 I'm simply grabbing my data-dtype value from the clicked cell.

  Line 5 I'm using https://editor.datatables.net/reference/type/form-options#buttons to define a button.

  Line 8 tells it to run a custom function on submit. This is the good stuff :)

  Line 9: Reading http://editor.datatables.net/reference/api/submit() (the "Add an extra field to the data" section) I can add in my extra collected data-dtype value, stored in dtype, to the data!

  Line 10 isn't needed, but I like to know how the edit is coming in: bubble, inline, or full.

  Line 14 tells the bubble function that I'm supplying it with buttons instead of just the default, and voila!

  So that's getting the extra data into the editor call. Now that it's in there, I only want to send the server the data from the cell that I clicked on, and not the entire row of data.

  // get the editor form before it submits to weed out data
  editor.on('preSubmit', function (e, o, action) {
      // if it's a bubble edit (a single field)
      if(o.etype == 'bubble') {
          // loop through our data array and remove all properties except dtype
          for(var key in o) {
              var obj = o[key];
              for(var prop in obj) {
                  if(prop != o.dtype) {
                      // remove the unwanted data property
                      delete o[key][prop];
                  }
              }
          }
      }
  });
  

  I wont bother to explain that line by line, but before submitting the data (which contains the full row's data) to the server, I'm looping through that data object, and remove every unwanted property - anything that doesn't match my passed in dtype. This allows me to submit JUST the column's data :)

  Hopefully this helps you develop something built-in to Editor, Allan, and helps anyone else experiencing this.

  Cheers!, _K
• allan Posts: 61,642Questions: 1Answers: 10,093 Site admin

  February 2015

  Nice solution - thanks for sharing this with us!

  Looking forward to implementing this in Editor core myself :-)

  Allan