none
Filtro de grid con jquery y ajax RRS feed

  • Pregunta

  • Amigos, estoy utilizando la siguiente sentencia para filtrar los registros de un gridview

    <asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
        <script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
     
        <script type="text/javascript" >
            $(document).ready(function () {
                $(".filterable tr:has(td)").each(function () {
                    var t = $(this).text().toLowerCase();
                    $("<td class='indexColumn'></td>")
                     .hide().text(t).appendTo(this);
                });
    
                $("#txtBuscar").keyup(function () {
                    var s = $(this).val().toLowerCase().split(" ");
                    $(".filterable tr:hidden").show();
                    $.each(s, function () {
                        $(".filterable tr:visible .indexColumn:not(:contains('"
                           + this + "'))").parent().hide();
                    });
                });
            });
        </script> 
        

    el cual funciona bien, cuando se carga la pagina por primera vez; pero luego cuando actualizo el gridview mediante un updatepanel este ya no funciona.

    <asp:Panel ID="pnEncargos" runat="server" Width="100%" Height="90%" 
        BackColor="White" ScrollBars ="Vertical" style="overflow-y: auto; overflow-x:hidden; "
        BorderColor="#669999" BorderWidth="1px" >
    
        <asp:UpdatePanel ID="upEncargos" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
    
           <asp:GridView ID="gvEncargos" runat="server" AllowSorting="True" 
                    Width="100%" CellPadding ="4" DataKeyNames="idReunion" ForeColor="#333333" 
                    GridLines="None" AutoGenerateColumns="False" CellSpacing="1" 
                    HorizontalAlign="Left" ShowHeaderWhenEmpty="True" 
                    Style="border-collapse:collapse;" class="filterable"> 
    .
    .
    .
    Me parece que es por que al cargar el grid nuevamente, la columna indexColumn desparece, entonces no se como se puede hacer para que se vuelva a ejecutar dicho codigo jquery?

    Saludos.

    miércoles, 29 de julio de 2015 1:48

Respuestas

  • Pues bingo!
    Encontre la forma de hacerlo funcionar, dejo las sentencias por si alguien lo necesite. Para empezar el indexColumn hay que ponerlo en una funcion, para que pueda ser invocado a necesidad :

      <script type="text/javascript" >
            $(document).ready(function () {
                $("#txtBuscar").keyup(function () {
                    var s = $(this).val().toLowerCase().split(" ");
                    $(".filterable tr:hidden").show();
                    $.each(s, function () {
                        $(".filterable tr:visible .indexColumn:not(:contains('"
                           + this + "'))").parent().hide();
                    });
                });
            });
    
            function ActualizaGrid() {
                $(".filterable tr:has(td)").each(function () {
                    var t = $(this).text().toLowerCase();
                    $("<td class='indexColumn'></td>")
                     .hide().text(t).appendTo(this);
                });
            }
        </script> 

    y esta es invocada desde el servidor, en el load del page o gridview, ya que el updatepanel utiliza ambos controles :

    ScriptManager.RegisterStartupScript(Me, Me.GetType(), "onLoad", "ActualizaGrid();", True)

    • Marcado como respuesta Edwin Delgado miércoles, 29 de julio de 2015 5:06
    miércoles, 29 de julio de 2015 5:06

Todas las respuestas

  • hola

    >>el cual funciona bien, cuando se carga la pagina por primera vez; pero luego cuando actualizo el gridview mediante un updatepanel este ya no funciona.

    recuerda que el updatepanel realiza un post al servidor de la seccion que este define en el template, por lo tanto los eventos de jquery que hayas adjuntos al html que estaba alli dentro se pierden

    aunque en el codigo que muestras no veo que el gridview tenga algun evento asignado, si veo el keypres() del textbox, pero no se donde esta ubicado este control, si esta dentro del updatepanel entonces asigna el evento con el on()


    $("#txtBuscar").on( "keyup", function () { ....


    -----

    por otro lado porque reinventas la rueda si hay librerias que ya realizan lo que planeas

    [ASP.NET] Plugin jQuery quickSearch: Filtrar tablas y listas (ejemplo con Gridview)

    saludos



    Leandro Tuttini

    Blog
    MVP Profile
    Buenos Aires
    Argentina

    miércoles, 29 de julio de 2015 2:38
  • Hola Leandro, gracias por responder.

    Pues las sentencias lo obtuve de la siguiente pagina : http://geeks.ms/blogs/gperez/archive/2009/05/22/tips-filtrar-un-gridview-con-jquery-al-presionar-una-tecla.aspx

    Y el textbox esta fuera del updatepanel, esta antes de el.
    El que si esta dentro del updatepanel es el gridview.

    <input type="text" id="txtBuscar" name="txtBuscar" placeholder="Buscar" maxlength="20" 
                        style="border: 1px solid Silver; padding:3px; width:170px; 
                        border-radius: 5px;-moz-border-radius: 5px;-webkit-border-radius: 5px;" title="Busca en memoria" />
    <i class="fa fa-search fa-lg fa-fw" ></i>
    
    <asp:Panel ID="pnEncargos" runat="server" Width="100%" Height="90%" 
        BackColor="White" ScrollBars ="Vertical" style="overflow-y: auto; overflow-x:hidden; "
        BorderColor="#669999" BorderWidth="1px" >
    
        <asp:UpdatePanel ID="upEncargos" runat="server" UpdateMode="Conditional">
        <ContentTemplate>
    .
    .
    .
    Voy a darle una chequeada a la pagina que indicas, pero me intriga el saber por que no funciona lo que postee, creo que lo que esta faltando es volver a actualizar el campo indexColumn al actualizar el updatepanel, ya que esta solo se actualiza al cargar la pagina por primera vez (postback), al menos es lo que entiendo de esas sentencias (recien estoy entrando a jquery).

    Saludos.

    miércoles, 29 de julio de 2015 4:20
  • Pues bingo!
    Encontre la forma de hacerlo funcionar, dejo las sentencias por si alguien lo necesite. Para empezar el indexColumn hay que ponerlo en una funcion, para que pueda ser invocado a necesidad :

      <script type="text/javascript" >
            $(document).ready(function () {
                $("#txtBuscar").keyup(function () {
                    var s = $(this).val().toLowerCase().split(" ");
                    $(".filterable tr:hidden").show();
                    $.each(s, function () {
                        $(".filterable tr:visible .indexColumn:not(:contains('"
                           + this + "'))").parent().hide();
                    });
                });
            });
    
            function ActualizaGrid() {
                $(".filterable tr:has(td)").each(function () {
                    var t = $(this).text().toLowerCase();
                    $("<td class='indexColumn'></td>")
                     .hide().text(t).appendTo(this);
                });
            }
        </script> 

    y esta es invocada desde el servidor, en el load del page o gridview, ya que el updatepanel utiliza ambos controles :

    ScriptManager.RegisterStartupScript(Me, Me.GetType(), "onLoad", "ActualizaGrid();", True)

    • Marcado como respuesta Edwin Delgado miércoles, 29 de julio de 2015 5:06
    miércoles, 29 de julio de 2015 5:06