0

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.

3
  • Parece ser un problema de CSS, pero sin un ejemplo mínimo verificable es imposible ayudarte
    – Yussef
    Commented el 28 dic. 2023 a las 7:55
  • @Yussef prácticamente soy nuevo en ésto de la programación(alrededor de 1 año), me podrías ayudar u orientar como podría agregar un ejemplo como el que mencionas? Commented el 3 ene. a las 16:39
  • Hola Daniel, tu error proviene de la implementación particular que estas haciendo. Al ser tan particular, es altamente improbable que alguien pueda determinar el problema solo mirando el código que has puesto, por lo que se necesita un ejemplo mínimo verificable, el cual es el código mínimo para reproducir el problema. En otras palabras un código que yo pueda copiar/pegar y ver el mismo error que tu tienes sin necesidad de hacer nada mas. Este ejemplo mínimo verificable puede (o no) tomar bastante trabajo construirlo, pero hay casos (como creo que es el tuyo) que no hay otra alternativa
    – Yussef
    Commented el 3 ene. a las 22:27

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.