jquery - propiedades - Agrupación de fila de Datatables: cómo expandir para mostrar las coincidencias de búsqueda y agregar el botón Restablecer campo de búsqueda

personalizar datatable jquery

Question

Estoy utilizando Datatables Plegable / Agrupamiento expandible.

Lo configuré para que todos los grupos se colapsen en la vista inicial. Gracias a la ayuda de ThulasiRam, he integrado group rowcount y colapso / expandir todas las funciones. Agrupación de fila de Datatables: cómo agregar recuento de filas por grupo y expandir / contraer todo

Me gustaría configurar la búsqueda de tablas para expandir automáticamente grupos con filas que coincidan con la búsqueda, en lugar de solo los grupos coincidentes.

También me gustaría agregar un botón de reinicio a la búsqueda de la tabla. He logrado agregar el botón "X", pero no he encontrado la manera de configurar la función de clic correctamente para que restablezca el campo de búsqueda de la tabla.

Configuré un jsfiddle para mostrar lo que intento lograr: http://jsfiddle.net/lbriquet/SBdJd/9/

¡Cualquier ayuda realmente sería apreciada!

Answer 1

Ok, entiendo que estabas usando las funciones privadas, no las públicas, mira aquí

Otro problema es que necesita mantener una referencia a su datatable para usar sus funciones. aquí está la respuesta

Answer 2

Me encanta el colapso y ampliar todos los botones funciona muy bien!

Tuve que modificarlo un poco para soportar la última versión de jquery

var source = j$(''div[id=myTable_filter]'')[0];
var source2 = j$(''div[id=myTable_filter]'')[0].firstChild;
var divToadd = j$(''<div>'', {''id'': ''dtsearch_filter''})
j$(source2).wrapAll(divToadd);
var htmlToadd = j$(''<input />'', {''type'': ''button'',''class'': ''expandedOrCollapsedGroup collapsed'', ''value'': ''Expand All'' })
j$(htmlToadd).prependTo(source);
j$(''.expandedOrCollapsedGroup'').click(function() {
if (j$(this).hasClass(''collapsed'')) {
j$(this).addClass(''expanded'').removeClass(''collapsed'').val(''Collapse All'').parents(''.dataTables_wrapper'').find(''.collapsed-group'').trigger(''click'');
}
else {
j$(this).addClass(''collapsed'').removeClass(''expanded'').val(''Collapse All'').parents(''.dataTables_wrapper'').find(''.expanded-group'').trigger(''click'');
}
});

más estos ajustes de estilo .expandedOrCollapsedGroup {width: 125px; flotador izquierdo; } .dataTables_filter {float: none; } .dtsearch_filter {float: right; }