tablas ejemplos diseño dinamico dinamicas bootstrap jquery datatables jquery-datatables

jquery - ejemplos - Tablas de datos: búsqueda de columna en filas secundarias



tablas en html5 (1)

Tengo un datable que usa tanto filas secundarias como búsqueda en columna (filtrado).

Ver esta muestra JSFiddle

Tomado de un par de ejemplos de DataTables: Ejemplo de filas secundarias - Ejemplo de búsqueda de columnas

Al buscar en una columna, me gustaría que los resultados incluyan información dentro de la fila secundaria.

Por ejemplo, desde el ejemplo de búsqueda de columna, la persona puede tener varias oficinas (Tokio, Londres y Nueva York) que solo podría ver al expandir un niño. Me gustaría que la fila principal muestre a esta persona cuando se ingrese CUALQUIERA de las oficinas, no solo la que se muestra en la fila.

¿Hay alguna manera de buscar a través de los datos de una fila, y no solo el texto mostrado?

Para duplicar en mi ejemplo: si busca el usuario Tiger Nixon y los expande, tienen una sección llamada Todas las Oficinas. Me gustaría que este usuario se muestre cuando busque "Nueva York" (o cualquiera de estas oficinas), no solo la primaria de Edimburgo.

Código de JavaScript relevante:

var table = $(''#example'').DataTable({ data: mdata, "columns": [{ "className": ''details-control'', "orderable": false, "data": null, "defaultContent": '''' }, { "data": "name" }, { "data": "position" }, { "data": "office" }, { "data": "salary" }], "order": [ [1, ''asc''] ] }); $(''#example tfoot th'').each( function () { var title = $(''#example thead th'').eq( $(this).index() ).text(); $(this).html( ''<input type="text" placeholder="Search ''+title+''" />'' ); } ); // Add event listener for opening and closing details $(''#example tbody'').on(''click'', ''td.details-control'', function () { var tr = $(this).closest(''tr''); var row = table.row(tr); if (row.child.isShown()) { // This row is already open - close it row.child.hide(); tr.removeClass(''shown''); } else { // Open this row row.child(format(row.data())).show(); tr.addClass(''shown''); } }); // Apply the search table.columns().every( function () { var that = this; $( ''input'', this.footer() ).on( ''keyup change'', function () { that .search( this.value ) .draw(); } ); } )

Como nota, mis datos se cargan a través de una llamada de Ajax en vivo, y tengo control total sobre los datos que se devuelven.

Cruz publicada en el foro de Datatables aquí