Display drop down for a column header with contents of the column

walterhunk

I have a data table in which once column has colors. I need a select drop down at the column header which shows the colors in the column and i can select the color which needs to be displayed.
here is the link for sample table which i have

https://jsfiddle.net/z53Ls7bk/2/

i tried using the following jquery code, but i am unable to achieve the requirement
var table = $('#MyTable').DataTable({ "initComplete" : function() {
var api = this.api(); api.columns().indexes().flatten().each(function(i) {
if(i==0) { var column = api.column(0);
var select = $('<select class="headSelect"><optionvalue="">Risk</option></select>')
``` .appendTo($(column.header()).empty()).on('change',function() {

```                 var val = $.fn.dataTable.util.escapeRegex($(this).val());
```                 column.search(val ? '^' + val + '$' : '',true, false).draw();

});
column.data().unique().sort().each(function(d,j) { select.append('<option class="headOption" value="'+d+'">' + d + '</option>'); });
} }
```});

walterhunk

var table = $('#MyTable').DataTable({
"initComplete" : function() {
var api = this.api();
api.columns().indexes().flatten().each(function(i) {
if(i==0) {
var column = api.column(0);
var select = $('<select class="headSelect"><option value="">Risk</option></select>') .appendTo($(column.header()).empty()).on('change',function() {

var val = $.fn.dataTable.util.escapeRegex($(this).val());
column.search(val ? '^' + val + '$' : '',true, false).draw();
});

column.data().unique().sort().each(function(d,j) {
select.append('<option class="headOption" value="'+d+'">' + d + '</option>');
});
}
});
}
});