Skip to main content
2 de 2
título editado

Se pierde formato/estilo de títulos 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.