Column rendering based on "options" array returned

Column rendering based on "options" array returned

klinglerklingler Posts: 90Questions: 42Answers: 2
edited November 2022 in DataTables

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

Answers

  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

    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

  • klinglerklingler Posts: 90Questions: 42Answers: 2
    edited November 2022

    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.

  • klinglerklingler Posts: 90Questions: 42Answers: 2

    Ah found it...should be:

        let table = $('#kommunikation')
          .on('xhr.dt', function (e, s, json) {
    
  • klinglerklingler Posts: 90Questions: 42Answers: 2

    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;
                  }
                },
    
  • allanallan Posts: 61,972Questions: 1Answers: 10,160 Site admin

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

    Allan

Sign In or Register to comment.