Por Fernanda Sallai
Neste artigo iremos aprender como filtrar os dados de um GridView usando o plugin QuickSearch do JQuery. Esse plugin está disponível em: http://plugins.jquery.com/jquery.quicksearch/
Vamos começar?!
Criaremos um projeto, no Visual Studio clique no Menu File -> New Project -> C# -> Web -> ASP.NET Empty Web Application, escolha onde irá salvar, inclua um nome no projeto e clique no botão OK. OBS: Usarei a linguagem C#.
Adicionaremos uma página ao projeto. Para isso, clique onde deseja inclui-la com botão direito do mouse escolha a opção ADD – New Item – Web Form. Chamarei a página de FiltrarDados.
A estrutura do projeto ficará conforme a Figura 1.
Figura 1: Estrutura do Projeto
A página “FiltrarDados” possuirá o layout conforme figura 2 e listagem 1.
Figura 2 – Layout da página
<html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> </head> <body> <form id="form1" runat="server"> <div> <h3>GridView - Filtrar dados</h3> Filtrar: <asp:TextBox ID="txtFiltro" runat="server"></asp:TextBox> </div> <div> <asp:GridView ID="gvdDados" runat="server"></asp:GridView> </div> </form> </body> </html>
Listagem 1 – Código do Layout
Carregaremos dados no GridView ‘gdvDados’. Nesse artigo não iremos buscar as informações no banco de dados. Como o intuito é só filtrar os dados, irei preencher o grid com dados de um DataTable, conforme Listagem 2.
using System;
using System.Data;
using System.Web.UI.WebControls;
<p>namespace FiltrarDadosGridView
{
public partial class FiltrarDados : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
// Método para carregar os dados
CarregarGrid();
}
private void CarregarGrid()
{
DataTable dt = new DataTable();</pre>
// Adicionando as colunas
dt.Columns.Add(new DataColumn("Nome", typeof(string)));
dt.Columns.Add(new DataColumn("Sobrenome", typeof(string)));
dt.Columns.Add(new DataColumn("Matricula", typeof(string)));
// Adicionando as linhass
dt.Rows.Add("Fernanda", "Sallai", "1221");
dt.Rows.Add("Aline", "Mattos", "2563");
dt.Rows.Add("Carlos", "Ramalho", "5599");
// Adionando os dados no GridView
gvdDados.DataSource = dt;
gvdDados.DataBind();
}
}
}
Listagem 2 – carregando dados no GridView.
Vamos executar o projeto para visualizar o resultado conforme a Figura 3.
Figura 3 – Exibindo o resultado
Chegou a hora de usar o plugin QuickSearch do JQuery. \o/
Faça o download do plugin e descompacte o arquivo. Incluiremos o item jquery.quicksearch.js, que está dentro da pasta SRC para o nosso projeto, conforme exibido na figura 4.
OBS: No meu projeto, criei uma pasta Scripts para incluí-lo.
Figura 4 – Adicionando quicksearch e Jquery ao projeto.
Não podemos esquecer de incluir também jquery-1.4.1.js, pois estamos usando a biblioteca JQuery.
Precisamos declaração de ambas dentro das tags Head de nossa página, conforme Listagem 3.
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script> <script src="Scripts/jquery.quicksearch.js" type="text/javascript"></script>
Listagem 3 – Declarando a biblioteca.
Incluiremos também dentro das tags Head de nossa página, o script informando o nome do input e da grid conforme listagem 4.
<script type="text/javascript">
$(function () {
$('input#txtFiltro').quicksearch('table#gvdDados tbody tr');
})
</script>
Listagem 4 – Incluindo script.
Se executarmos o projeto nesse momento, já conseguimos filtrar os dados da grid, porém só manterá o cabeçalho da grid se o valor informado estiver nela.
Para manter sempre o cabeçalho da grid iremos incluir um evento chamado “OnPreRender” ficando conforme Listagem 5.
<asp:GridView ID="gvdDados" runat="server" OnPreRender="gvdDados_PreRender"></asp:GridView>
Listagem 5 – Incluindo evento OnPreRender.
E por fim incluiremos o código no source da nossa página conforme Listagem 6.
protected void gvdDados_PreRender(object sender, EventArgs e)
{
if (gvdDados.Rows.Count > 0)
{
gvdDados.UseAccessibleHeader = true;
gvdDados.HeaderRow.TableSection = TableRowSection.TableHeader;
}
}
Listagem 6 – Incluindo código do evento OnPreRender.
Ao executar o projeto e informar um valor no campo de filtro, a grid só exibirá os dados correspondentes conforme figura 5.
Figura 5 – Filtrando os dados
Disponibilizo na versão deste post publicada no meu blog o projeto desenvolvido no Visual Studio 2012 em C#: FiltrarDadosGridView
#TecProdesp 