How to render the label of an select's option instead of the value (reusably)

hjahn

Link to test case:
http://live.datatables.net/redibesi/1/edit?js
Debugger code (debug.datatables.net): upimer
Error messages shown: none
Description of problem:
When using field type "select", how do I render the label of the selected option instead of the value?
For example in the live.datatables.net example above, I have a column called "priority" with integers in the range 1 to 5.
When editing a row, the user is presented with a select list containing options with labels like '1 (highest)'. I would like to render this labels in the dataTable instead of the simple '1' without hardcoding it.

Please note:
I am currently setting up dataTables to be used by our dev team and have to consider a lot of different use cases. For example, the option list might be hardcoded like in the example above, or it might be loaded along with the data like in https://editor.datatables.net/examples/inline-editing/join.html.
We are only using the client-side datatable libraries.
Also, i want to avoid having to write a lot of code each time we want to use a select field type.

Ideally the solution would look like the following pseudo code:

var myRenderFunctions = {
renderSelect: function(data, type, row, meta){
if ( type === 'display' ) {
return this.api().column(meta.col).getOption(data).label; /* see notes below*/
}
return data;
}
}

$('#example').DataTable( {
columns:[
{ data: "priority", render: myRenderFunctions.renderSelect }
]
}

The above code has two problems:
- "this" is not bound to the dataTable in render functions (In callback-functions it usually is). The settings-object in the meta-parameter could be used to obtain an api-instance, but using this tends to slow the table rendering down considerably.
- column(selector).getOption() does not exist.

Any help achiving this is highly appreciated.

Henning

allan

Hi Henning,

There are two options to do what you are looking for. The first is to have both the label and the value in the row's data object. Then you update the label when the value is changed - I've put a little example of that together here: http://live.datatables.net/layonado/52/edit .

The second is what I think you are describing, look up the value from the rendering function and then display that. Here is how that can be done: http://live.datatables.net/fomufazo/1/edit . The rendering function could be generalised so you just pass in the list of options and it would then handle the lookup, so not needed to write that each time.

Regards,
Allan

hjahn

Hi Allan,

thanks for your help.
I would prefer the second option because I dont want having to handle labels in data objects.
However, I still need to identify the option list because as written above, it might not be hardcoded but transmitted along with the data.

I tried to get the option list from the editor:
$(editor.field(tableColumn.data).input()).find("option")

This didn't work because the select doesnt have any options attached during the first render.

Can you point me to the logic editor uses when generating the options?I might be able to reuse it.

Thanks
Henning

allan

Hi Henning,

Editor doesn't expose the list of options as a data API I'm afraid. However, assuming you are loading the options via DataTables' Ajax (?) then you can use ajax.json() to get the data, or alternatively, use xhr to store a reference to the JSON object, and then look up the options in that (keyed by field name). That is what I normally do in this situation.

Allan

hjahn

Hi Allan,

I solved the problem using the xhr-event.
thanks for your help!

Henning