Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82439

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

$
0
0

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


Viewing all articles
Browse latest Browse all 82439

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>