0

La cuestion es la siguiente: Estoy construyendo una datatable con datos de db. Resulta que necesito agregar un buscador individual por columna, ademas del header de la columna pero tengo el siguiente problema:

  • Si agrego el input con un solo header el filtrado funciona ok pero al dar click en el input aplica un "sort" a la columna. Lo cual no esta bien. Por eso se me ocurrio agregar un doble header.

  • Con el doble header, se ve bien, pero debo agregar el "orderCellsTop": true, para que el boton de ordenamiento aparezca correctamente, pero mi listener para el filtrado de la columna no funciona. introducir la descripción de la imagen aquí

  • Si pongo "orderCellsTop": false, el filtrado con el input funciona, pero el boton de orden aparece junto al input, y es el mismo problema del primer punto (Ordena la columna si doy click en el input) introducir la descripción de la imagen aquí

Aqui esta el codigo de la tabla. Alguna idea de que estoy haciendo mal ??

$('#tblTramiteDeFacturas thead tr#filter th').each(function () {
$(this).html('<label for=""> </label><input type="text" placeholder=" ' + title[i] + '" class="form-control column_search" />');});

var tblSelected = $('#tblTramiteDeFacturas').DataTable({"orderCellsTop": false});

 tblSelected.columns().every(function () {
  var that = this;
  $('input', this.header()).on('keyup change', function () {
      if (that.search() !== this.value) {
          that.search(this.value).draw();
      }
  });


Estoy usando la version de datatables 1.10.22

3
  • veo que pusiste .DataTable, estás seguro que no es .dataTable ? Igual ayudar+ia saer de dónde sacar tu librería de datatables Commented el 24 nov. 2020 a las 23:33
  • Intente con una version antigua local, y estoy usando tambien el cdn oficial, y es el mismo comportamiento Commented el 24 nov. 2020 a las 23:44
  • pero yo no soy hacker ni vidente para ver cual es tu versión antigua local ni sé la liga del CDN que usaste. Ponla en tu pregunta. Commented el 24 nov. 2020 a las 23:45

1 respuesta 1

0

Al fin lo solucione con este simple código, asignando la clase filterhead a cada th en la creacion de la tabla.

 $(".dataTables_scrollHeadInner .filterhead").each( function ( i ) {
                var select = $('<input type="text" placeholder="Buscar" class="form-control-search"/>')
                    .appendTo( $(this).empty() )
                    .on( 'keyup', function () {
                    tblSelected.column( i ).search(this.value).draw();
                    } ); 

Tu Respuesta

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

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.