Column rendering based on "options" array returned

klingler

Good morning

I use a returned "options" array for a select field in the editor...all fine:

            "options": {
                "level": [
                    {
                        "label": "n/a",
                        "value": "0"
                    },
                    {
                        "label": "+12/-12V",
                        "value": "1"
                    }
                 ]
              }

How could I access the options elements in the datatables render function?

The JSON returned has just the reference to the "level", so 0, 1 and so on...but want to map that to the label value from the options array.

thanks in advance
richard

allan

Hi Richard,

What you need to do is store the options.level array in a variable scoped so that the rendering function can see it via the xhr event:

let levelOptions = [];
let table = $('#myTable')
  .on('xhr', function (e, s, json) {
    levelOptions = json.options.level;
  })
  .DataTable({
    columns: [{
      data: 'level',
      render: function (data) {
        // lookup in `levelOptions`
      }
    }]
  });

You might want to convert the label / value array into a Map, keyed by the value, so you can do a quick lookup on it.

Allan

klingler

Hmm..odd....when I place a console.log inside the xhr Event it is not triggered at all:

    let levels = [];
    let table = $('#kommunikation')
      .on('xhr', function (e, s, json) {
        levels = json.options.pegel;
        console.log(json);
      })
      .DataTable({

Thought there would be already a built-in options to access the options as with the file array used for rendering images.

Is that something worth to implement in the future?
Most columns use a foreign key who's label/values are accessible via the editor's select fields.

klingler

Ah found it...should be:

    let table = $('#kommunikation')
      .on('xhr.dt', function (e, s, json) {

klingler

Just for reference for others maybe (o;

Looks like this now:

    var levels;
    let table = $('#kommunikation')
      .on('xhr.dt', function (e, s, json) {
        levels = new Map(json.options.pegel.map((obj) => [obj.value, obj.label]));
      })
      .DataTable({

and the render part:

            { data: "level", className: 'editable dt-body-left',
              render: function(data, type) {
                if(type = 'display')
                  return levels.get(data);
                return data;
              }
            },

allan

Oops - you are right. I'm so used to using DataTables' on() method which added that namespace automatically!

Allan