Skip to main content
título editado
Enlace

Se pierden thpierde formato/estilo de títulos de datatable al abrir select múltiple que tengo en td

Origen Enlace

Se pierden th de datatable al abrir select múltiple que tengo en td

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

al abrir el select al abrir el select

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.