jquery DataTables Editor: "select" field displays option value instead of label

Question

I am using jquery's DataTables which is really working great. Then only problem I got is, that I am facing (in non-edit-view) the value of the select-field (which is an id). The user of course doesn't want to see the id of course. Therefore I am looking for a possibility to configure that column in a way to show always the value of label property.

Here a some snippets:

$(document).ready(function() {

        var table = $('#overviewTable').DataTable({
            dom: "Tfrtip",
            ajax: "/Conroller/GetTableData",
            columns: [
                { data: "Id", className: "readOnly", visible: false },
                {
                    data: "LoanTransactionId",
                    className: "readOnly readData clickable",
                    "fnCreatedCell": function(nTd, sData, oData, iRow, iCol) {
                        $(nTd).html("<a href='#'>" + oData.LoanTransactionId + "</a>");
                    }
                },
                { data: "Id", className: "readOnly" },
                { data: "property_1", className: "readOnly" },
                { data: "Priority" },
                { data: null, className: "action readOnly", defaultContent: '<a href="#">Info</a>' }
            ],
            order: [1, 'asc'],
            tableTools: {
                sRowSelect: "os",
                sRowSelector: 'td:first-child',
                aButtons: []
            }
        });

        // data reload every 30 seconds
        setInterval(function() {
            table.ajax.reload();
        }, 30000);

        editor = new $.fn.dataTable.Editor({
            ajax: "PostTable",
            table: "#overviewTable",
            fields: [
                {
                    label: "Id",
                    name: "Id"
                },
                {
                    label: "Column 1",
                    name: "property_1"
                }, 
                {
                    label: "Priority",
                    name: "Priority",
                    type: "select",
                    options: [
                        { label: "low", value: 0 },
                        { label: "mid", id: 1 },
                        { text: "high", id: 2 }
                    ]
                }
            ]
        });

        // Inline Edit - only those who are not readOnly
        $('#overviewTable').on('click', 'tbody td:not(:first-child .readOnly)', function(e) {
            editor.inline(this, {
                submitOnBlur: true
            });
        });

How it looks in the display mode

How it looks in the edit mode

Answer 1

See the documentation on columns.render

You want to modify your column options for priority

Preferred Option: Your data source has a field with the priority as a string

This is the best option, as you don't want to have two places with this business logic. Keep it out of the client code.

Also, you will want to modify the editor as well so that the options used have been retrieved dynamically from the server to keep this business logic out of the client too. This is left as an exercise for the reader.

Since you don't provide details on what your data structure looks lik, I'm assuming it is an object, and it has an attribute priorityAsString so use the string option type for render.

        columns: [
            ...
            { 
              data: "Priority" ,
              render: "priorityAsString",
            },

Option 2) You write a function to map priority to string

Do this if you can't get the data from the server. But remember you will need to update many places when the priority list changes.

        columns: [
            ...
            { 
              data: "Priority" ,
              render: renderPriorityAsString,
            },
        ...

function renderPriorityAsString(priority) {
  const priorityToString = {
     0: 'low',
     1: 'med',
     2: 'high',    
  };
  return priorityToString[priority] || `${priority} does not have a lookup value`;
}

Answer 2

"render": function ( data, type, full ) { return label;}