populating Editor data with an ajax call

populating Editor data with an ajax call

daudodaudo Posts: 13Questions: 6Answers: 1
edited May 2015 in Editor


I am having troubles finding a way to load (not submit) data coming from an ajax call into Editor.

The scenario I have is that my DataTable is populated with only a fraction of the data that Editor will have to edit.

Thinking as a flow of events, the following occurs:

  1. DataTable loads a data via an ajax call, delivering only a small fraction of the record's data
  2. user selects a row
  3. user clicks "edit", resulting in a "fetch details" ajax call that populates the Editor with the JSON data retrieved

I've checked the "standalone" samples, but they don't seem to apply to this kind of scenario.

Additional note:

What I've tried so far was to instantiate the editor and then invoke the edit method with the retrieved data instead of the selected row like this:

var editor = new $.fn.dataTable.Editor({
        ajax: 'foobar/crud,
        fields : [ {
            label : "a foo"
            name : "foo"
        }, {
            label : "a bar"
            name : "bar"


$('#editButton').on('click', function () {
  var data = loadAjaxDetailData();
  editor.edit(data, true, { title: "a foo meets a bar" });

Any ideas appreciated :)


  • allanallan Posts: 50,303Questions: 1Answers: 7,478 Site admin

    This example shows how it might be done. You do actually load all of the data for each row - but you only have the DataTable display some of it.

    The alternative, is that you could use initEdit to Ajax get the additional data if you need and then set() to set the values of the additional fields, but the way showing in the demo might be a little easier.


  • daudodaudo Posts: 13Questions: 6Answers: 1

    Thanks Allan. I've seen this example as well, but this would retrieve way too much data for the table (and the server).

    However, initEdit seems to be the way to go.

    In the meantime, I have already crafted a workaround, using jquery.extend to enrich the DataTable row().data() with the additional data from my detail call and then feed the editor with the merged dataset:

    var detailData = loadAjaxDetailData();
    $.extend(true, table.api().row( row ).data(), detailData );
    editor.edit(row, true, { title: "a foo meets a bar" });

    But initEdit seems to be more "standards" like, so I think I'll refactor my code accordingly.

This discussion has been closed.