Ordenação de dados em Gridview

Fala, galera!!

Hoje postarei uma solução simples utilizando JQuery para uma tarefa um pouco trabalhosa se feita via C# puro: Ordenação de dados em GridView.

Para isso, utilizaremos o plugin TableSorter para Jquery que pode ser encontrado em http://tablesorter.com/docs/.

Para começar, adicione o seguinte código ao code-behind para que sejam incluídas na sua gridview as seções <thead> e <tbody> que serão utilizadas pelo TableSorter:


protected void GridView1_PreRender(object sender, EventArgs e)
        {
           //As 2 linhas abaixo só devem ser adicionadas se você não estiver utilizando ObjectDataSource,   SqlDataSource ou LinqDataSource
            GridView1.DataSource = "SEU DATASOURCE";
            GridView1.DataBind();
            if (GridView1.Rows.Count > 0)
            {
                //Substitui <td> por <th>
                GridView1.UseAccessibleHeader = true;
                //Adiciona <thead> e <tbody>
                GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
            }
        }

Adicione as referências e o script abaixo em sua página ASPX e seu gridview estará com a ordenação funcionando:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>

<script type="text/javascript" src="/script/tablesorter/jquery.tablesorter.js"></script>

<link rel="stylesheet" href="/script/tablesorter/themes/blue/style.css" type="text/css"  id="" media="print, projection, screen" />


$(document).ready(function() {
       $("#<%=GridView1.ClientID%>").tablesorter();
});

É possível a criação de widgets que fazem com que a ordenação selecionada seja persistida durante a sessão do usuário. Mais informações em: http://ybits.net/2009/10/making-jquery-tablesorter-persistent/

Um abraço e até a próxima!!