Print Page - Filter items in datagrid on keyup

Hi,

I built a datagrid from an HTML table, and I want to implement filtering on the headers. I was able to get the filters to work partially, meaning as I type the rows are being correctly filtered, but, if I delete a character in my filter input field, all rows I get are the ones that were filtered before, so the ones filtered out before are not coming back to the grid.

I tried calling the datagrid() method again and that returns all items, but I then lose what I have entered in my filter field. You can see this by entering a "p" and then an "e", it will show only two items, but if you delete the "e" it stays those two items.

Any help will be greatly appreciated.

Here's a working fiddle for that

http://jsfiddle.net/9BxCH/1/

Thank you guys!

Ok, I couldn't make it work in the fiddle, but I got it to work on my project with the code below, just in case anyone else is looking for the same:

Code:

$( document ).on( 'keyup', '.filtro', function() {
var filtro = $( this ).val();
var campoFiltro = $( this ).closest( 'td' ).attr( 'field' );
var registros = $( '#listado-atenciones' ).datagrid( 'getData' ).originalRows;

while ( $( '#listado-atenciones' ).datagrid( 'getRows' ).length > 0 )
$( '#listado-atenciones' ).datagrid( 'deleteRow', 0 );

for ( var i = 0; i < registros.length; i++ ) {
if ( registros[ i ][ campoFiltro ].toLowerCase().indexOf( filtro.toLowerCase() ) != -1 ) {
$( '#listado-atenciones' ).datagrid( 'appendRow', registros[ i ] );
}
}
});

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: andrux on July 26, 2013, 12:29:04 PM