populating Editor data with an ajax call

daudo

Hi,

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 :)

allan

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.

Regards,
Allan

daudo

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.