jquery - example - DataTables busca contenido fila hijo

propiedades datatable jquery

Question

La barra de búsqueda de DataTables no me permite buscar contenido dentro de las filas secundarias .

He buscado mucho para encontrar la respuesta a esto ( 1 , 2 , 3 , 4 , 5 , 6 , 7 , 8 , 9 ), pero hay pocas o ninguna respuesta sobre el tema.

Aquí hay un jsfiddle simple y los resultados del depurador DataTables .

Quiero buscar en la tabla un número de extensión (que está en la fila secundaria), pero escribir uno de los números de extensión en la barra de búsqueda no deja resultados de búsqueda.

Probé la solución desde esta publicación , agregando esto:

table.columns().every( function () {
    var that = this;
    var header = this.header();

    $( ''input'', this.footer() ).on( ''keyup change'', function () {
        that
        .column( header.getAttribute(''data-search-index'')*1 ) // *1 to make it a number
        .search( this.value )
        .draw();
    } );
} );

... pero todavía no funciona, como se puede ver en el jsfiddle vinculado anteriormente .

¿Puede alguien ayudarme?

Gracias

Answer 1

Tengo que preguntar: ¿Qué te hace creer que puedes buscar contenido en filas secundarias que estás inyectando dinámicamente solo cuando se muestran las filas secundarias? ¿Y cómo debería una búsqueda de column() cubrir el contenido de otras filas, alguna vez?

Cuando esto dice, hay, por supuesto, una solución. En lugar de crear el contenido secundario de la fila una y otra vez, guárdelo en una matriz:

var details = [];

Ahora, cuando inicialice la tabla, también inicializará el contenido de la fila secundaria:

...
columns: [{
   className: ''details-control'',
   orderable: false,
   data: null,
   defaultContent: '''',
   render: function(data, type, row, meta) {  
      details[meta.row] = format(data);
   }    
}, 
...

En la función de formato (), agregue una clase al campo Número de extensión para facilitar el acceso:

''<td class="extNo">'' + d.extn + ''</td>'' +

Cuando muestra filas secundarias, inserte el contenido previamente procesado a partir de los details[] lugar de llamar al format() :

if (row.child.isShown()) {
   row.child.hide();
   tr.removeClass(''shown'');
} else {
   row.child(details[row.index()]).show();            
   tr.addClass(''shown'');
}

Cree un filtro que devuelva solo filas que tengan una fila de details[] secundaria que contenga un determinado número de extensión:

function filterByDetailsExtNo(extNo) {
    $.fn.dataTable.ext.search.push(
    function(settings, data, dataIndex) {
       return $(details[dataIndex]).find(''.extNo'').text() == extNo;
    }    
  )
  table.draw();
  $.fn.dataTable.ext.search.pop();
}  

Use ese filtro personalizado en lugar de la búsqueda de column() en sus manejadores de entrada:

table.columns().every( function () {
    $( ''input'', this.footer() ).on( ''keyup change'', function () {
        filterByDetailsExtNo(this.value);
    });
});

violín bifurcado -> https://jsfiddle.net/7o67vhrz/

Actualización . Para aplicar el filtro anterior al cuadro de búsqueda general:

$(''.dataTables_filter input'')
   .off()
   .on(''keyup'', function() {
      filterByDetailsExtNo(this.value);
   });    

otro violín bifurcado -> https://jsfiddle.net/ds3qp41g/

Último ejemplo . Combinar detalles de búsqueda y búsqueda "nativa"

function filterByDetailsExtNoAndInput(term) {
      $.fn.dataTable.ext.search.push(
        function(settings, data, dataIndex) {
            if ($(details[dataIndex]).find(''.extNo'').text() == term) return true;
            for (var i=0;i<data.length;i++) {
                if (data[i].toLowerCase().indexOf(term.toLowerCase())>=0) {
                    return true
                }    
            }   
            return false;
        }    
      )
      table.draw();
      $.fn.dataTable.ext.search.pop();
    }  

violín -> https://jsfiddle.net/h2u4fowj/

Answer 2

Este es un hilo bastante antiguo, y la respuesta aceptada sí funciona, pero quería proponer una solución alternativa.

Estaba teniendo el mismo problema al no poder buscar dentro de las filas secundarias, y mi solución era hacer una <td> oculta al final de mi tabla que contuviera los datos en las filas secundarias; de esta manera, el indexador la ve pero el el usuario no.

Para el HTML limitado, agregué una nueva columna:

<th class="hidden">Data</th>

Luego, dentro de la llamada DataTables:

//Within var table = $(''#table'').DataTable( {....
columns : [
        //{ className : ''details-control''},
        { data : ''a'' }, //a-e are the columns I want the user to see.
        { data : ''b'' },
        { data : ''c'' },
        { data : ''d'' },
        { data : ''e'' },            
        // this last one is my "index helper"
        { data : ''comments'',
          render : function(data, type, full, meta) {
            return full.f + full.g + full.h + full.i;
          }
         }
    ],

Entonces solo necesitas ocultar esta columna. Usted puede hacer esto ya sea a través del método recomendado de DataTables:

https://datatables.net/examples/basic_init/hidden_columns.html

o mediante el método que elegí:

"createdRow" : function (row,data,index) {
    $(''td'',row).eq(6).addClass(''hidden'');
}

//and the css...
.hidden {
 visibility: hidden;
}

Te queda una <td> al final de tu tabla que contiene todo de las filas secundarias, pero es invisible y funciona con el cuadro de búsqueda / elemento de filtro.

Answer 3

SOLUCIÓN

Para que jQuery DataTables busque filas secundarias, debe agregar los datos mostrados en las filas secundarias a la tabla principal como columnas ocultas.

Por ejemplo, puede agregar una columna oculta para la propiedad extn data usando la opción columns.visible como se muestra a continuación:

JavaScript:

    "columns": [
        {
            "class":          ''details-control'',
            "orderable":      false,
            "data":           null,
            "defaultContent": ''''
        },
        { "data": "name" },
        { "data": "position" },
        { "data": "office" },
        { "data": "salary" },
        { "data": "extn", "visible": false }            
    ],

HTML :

<thead>
    <tr>
        <th></th>
        <th>Name</th>
        <th>Position</th>
        <th>Office</th>
        <th>Salary</th>
        <th>Extn.</th>
    </tr>
</thead>

MANIFESTACIÓN

Ver este jsFiddle para código y demostración. Busque 5407 y se mostrará la primera fila aunque los datos solo aparezcan en la fila secundaria.