Раскрывающийся список пользовательских фильтров DataTable

Question

у меня есть таблица с пользовательским фильтром рядом с заголовком

<table id="example2" class="table table-bordered table-hover">
 <thead bgcolor="#c5c5c5">
 <tr>
  <th>Type</th>
  <th>Start</th>
  <th>End</th>
 </tr>
 <tr class="filterrow">
  <th class="select-filter">
    <select class="form-control" placeholder="Type">
      <option value="">Search</option>
    </select>
  </th>
  <th class="clear-filter text-center"></th>
  <th class="clear-filter text-center"></th>
 </tr>
 </thead>
 <tbody>

 </tbody>
</table>

данные из моей базы данных выглядят так:

    type     |   start    |    end
____________________________________
    orig     |    01      |    05
    classA   |    01      |    05
    classB   |    01      |    05
    classA   |    01      |    05
    classB   |    01      |    05
    orig     |    01      |    05
    orig     |    01      |    05

я хотел получить данные из datatable, затем добавьте его в мой пользовательский элемент select, который получит значение orig, classA, classB, чтобы мой элемент select выглядел следующим образом

<select class="form-control" placeholder="Type">
  <option value="">Search</option>
  <option value="orig">orig</option>
  <option value="classA">classA</option>
  <option value="classB">classB</option>
</select>

. Это сценарий, который я использую * 1012. *

$.each($('.select-filter', dataTable.table().header()), function () {
    var column = dataTable.column($(this).index());
    $( 'select', this).on( 'change', function () {
        if ( column.search() !== this.value ) {
            column
                .search( this.value )
                .draw();

        } else if ( column.search() !== "" ) {
            column
                .draw();
        }
    });
});  

вот как я хотел выглядеть