DT + Editor field type options from AJAX

ashl1

Can I don't set options in JS but loading from AJAX to properly display it?

• When I return 'value' property from AJAX - the DT don't use the label for that property but just display the value itself (appropriate options object is included in AJAX response).
• When I return 'label' property from AJAX - the DT show the 'label' but when editing the Editor don't recognize the value of that option and send empty value for that field.

allan

If you want to use Ajax to populate the options, you can use the select field type's update() method (e.g. editor.field('myField').update( ... )) which you can pass the options you want to display - get that use $.ajax or whatever you want.

It is also important to not the different between the label and value. Normally you want the user to see the label in the DataTable and select list, but the value is the data that is actually changed. As such your JSON data for the DataTable should contain both the label and the value - you can use the label in the DataTable and the value for Editor.

The join example demonstrates this.

Allan

ashl1

Ok, let me explain in more detailed.
Does the following configuration work?

$(document).ready( function () {
  var editor = new $.fn.dataTable.Editor({
    ajax: 'smth',
    table: 'example',
    fields: [
      {
        name: 'selectingField',
        label: 'Selecting',
        type: 'select',
      },
      {
        name: 'otherField',
        label: 'Another field',
      },
    ],
  });
  var table = $('#example').DataTable({
    ajax: 'smth',
    columns: [
      {
        title: 'Selecting',
        data:  'selectingField',
      },
      {
        title: 'Another field',
        data:  'otherField',
      },
    ],
  });
} );

With the following first AJAX loading:

{
  "data": [
    {
      "DT_RowId": "1",
      'selectingField': '1',
      'otherField': 'Some text',
      }
    },
  ],
  'options': {
    'selectingField': [
      {
        'label': 'First',
        'value': '1',
      },
      {
        'label': 'Second',
        'value': '2',
      },
    ]
  }
}

Then create new element with the following AJAX request and response:

action=create
data[selectingField]=2
data[otherField]='Some new text'

{
  "row": {
    "DT_RowId": "2",
    "selectingField": "2"
    'otherField': 'Some new text',
  },
  'options': {
    'selectingField': [
      {
        'label': 'First',
        'value': '1',
      },
      {
        'label': 'Second',
        'value': '2',
      },
    ]
  }
}

What I expect:

• The table show value 'Second'
• If I want to edit that second row, I receive the following request:

action=create
data[selectingField]=2
data[otherField]='Some edited text'

So, is this possible?

allan

The table show value 'Second'

The problem there is that the value Second is not in the row object. You really need the data that you want to display in the table in the row object - like in the example I linked to above. It is possible to use columns.render as a function to perform a lookup, but generally it is easier to modify the server-side to add the data required.

Allan

ashl1

As I understand the only way to work "from the box" is using two separated values for Editor and DT representing the same object at the same time. Is that correct?
And the only way is using join tables? Can I use it like Orthogonal data? Or only way is described in join example?

allan

If you want to show different data in the DataTable, from that which you want to edit in Editor, then yes, both should be included in the data source object. As I say, it is possible to render the value into the label, but I would suggest that it will be much easier to simply add the extra data into the row's data object.

The example effectively uses orthogonal data.

Allan