DataTables busca contenido de fila secundaria

Poseemos la mejor información que hallamos por todo internet. Queremos que te sea de mucha ayuda y si puedes comentarnos algo que nos pueda ayudar a mejorar hazlo libremente.

Solución:

SOLUCIÓN

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

Por ejemplo, puede agregar una columna oculta para extn propiedad de datos usando columns.visible opción 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:

    
        
        Name
        Position
        Office
        Salary
        Extn.
    

MANIFESTACIÓN

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

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

Cuando se dice esto, por supuesto que hay una solución. En lugar de crear el contenido de la fila secundaria una y otra vez, manténgalo en un array :

var details = [];

Ahora, cuando está inicializando la tabla, también inicializa 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 format(), agregue una clase al campo Número de extensión para facilitar el acceso:

'' + d.extn + '' +

Cuando muestre filas secundarias, inserte el contenido renderizado previamente de details[] en lugar de llamar 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 las filas que tienen un details[] fila secundaria con 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 del column() busque en sus controladores de entrada:

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

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

---

Actualizar. 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. Combine la búsqueda de detalles y la 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=0) 
                    return true
                    
               
            return false;
            
      )
      table.draw();
      $.fn.dataTable.ext.search.pop();
      

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

Puntuaciones y comentarios

Si te apasiona la programación, puedes dejar un escrito acerca de qué te ha impresionado de este ensayo.

---

---

Utiliza Nuestro Buscador