Tengo un datatable con filtros tipo select múltiples en td para cada columna (excepto 2 o 3 que no preciso filtrar), el detalle que al abrir alguno de los select para seleccionar algún(as) opciones se pierden los títulos de la tabla, se quitan o se esconden como si perdieran formato o estilo los encabezados del Datatable

**Creando las options del select múltiple**

    /* Plugin API method to determine is a column is sortable */
    $.fn.dataTable.Api.register('column().searchable()', function() {
      var ctx = this.context[0];
      return ctx.aoColumns[this[0]].bSearchable;
    });

    function createDropdowns(api) {
    	api.columns().every(function() {
    		if (this.searchable()) {
    			var that = this;
    			var col = this.index();

			// Only create if not there or blank
			var selected = $('thead tr:eq(1) td:eq(' + col + ') select').val();
			if (selected === undefined || selected === '') {
				// Create the `select` element
				$('thead tr:eq(1) td')
					.eq(col)
					.empty();
          
          $('.selectpicker').selectpicker()
				var select = $(`<select multiple class="form-control form-control-sm selectpicker"><option value=""></option></select>`)
					.appendTo($('thead tr:eq(1) td').eq(col))
					.on('change', function() {
                var selectedValues = $(this).val() || [];
						that.search(selectedValues.join('|'), true, false).draw();
						createDropdowns(api);
					});

				api
					.cells(null, col, {
						search: 'applied'
					})
					.data()
					.sort()
					.unique()
					.each(function(d) {
						select.append($('<option>' + d + '</option>'));
					});
			 }
		 }
	  });

    }

**Llamando la Tabla con todas sus propiedades al final se llama la función createDropdowns**

    async function cargarTablaCreditos(id_credito) {
  

    [if (id_perfil == 3) {
        var id_asesor1 = await consultarIdAsesor();
        console.log("id_asesor1: ", id_asesor1);
      } else {
        var id_asesor1 = 0
      }
      let id_asesor = $('#sCreAsesor').val()
      let status = $('#sCreStatus').val()
      let id_banco = $('#sCreBanco').val()
      let fechas = obtenerFechasDRP($('.drpCreditos'))
      // console.log("fechas_creditos: ", fechas);
      fecha1 = fechas\[0\]
      fecha2 = fechas\[1\]
      let jsonDatos = { "data": \[\] }
      jsonDatos\["data"\].push({
        "id_credito": id_credito,
        "id_perfil": id_perfil,
        "id_usuario": id_usuario,
        "id_asesor": id_asesor,
        "id_asesor1": id_asesor1,
        "status": status,
        "id_banco": id_banco,
        "fecha1": fecha1,
        "fecha2": fecha2
      })
    
      let jsonCredito = await consultarCreditos(jsonDatos)
      console.log("jsonCredito", jsonCredito)
    
    
    
      let x = 0
    
      var table = $('#tablaCreditos').DataTable({
        "stateSave": true,
        "bDestroy": true,
        "dom": 'Bfrtip',
        "buttons": \[
          {
            "extend": 'excelHtml5',
            "exportOptions": {
              "columns": ':visible'
            }
            "extend": 'pageLength',
          },
          'colvis'
        \],
        "language": datatable_lenguaje\[0\],
        "scrollX": true,
        "scrollY": 650,
        "scrollCollapse": true,
        "paging": false,
        "fixedColumns": {
          left: 4
        },
        "fixedHeader": true,
    		"orderCellsTop": true,
        "order": \[\[69, 'DESC'\], \[2, 'DESC'\], \[1, 'DESC'\]\],
        "createdRow": function (row, data, dataIndex) {
          if (data\[19\] == "<strong>SUBTOTALES:</strong>") {
            $(row).css({
              'background-color': '#39A44C',
              'color': '#FFF',
              'font-weight': 'bold',
              'font-size': '12px'
            });
          }
          if (x == 0) {
            $('td:eq(0), td:eq(1), td:eq(2), td:eq(3)', row).css({
              'background-color': '#d0f2d6',
              'color': '#000'
            })
            x = 1
          } else {
            $('td:eq(0), td:eq(1), td:eq(2), td:eq(3)', row).css({
              'background-color': '#f2fff5',
              'color': '#000'
            })
            x = 0
          }
        },
        "columnDefs": \[
          {
            "targets": \[9, 69\],
            "visible": false,
          },
          {
            "targets": \[0, 1, 13\],
            "searchable": false
          },
          {
            "targets": \[0, 1, 2\],
            "className": "text-center"
          },
        \],
        "initComplete": function() {
          setTimeout(() => {
            createDropdowns(this.api());
          }, 250);
    		}
          }).clear().draw()][1]

*antes de abrir el select*
[![antes de abrir el select][1]][1]

*al abrir el select*
[![al abrir el select][2]][2]

Aparte no se alcanza a ver las opciones del select en su totalidad sino que solo muestra una parte la cual si le doy scroll si se muestran pero solo en ese pequeño espacio.


  [1]: https://i.sstatic.net/1Tqud.png
  [2]: https://i.sstatic.net/YYkz7.png