Ajax - pesquisa em grades e ordenação

<< Click to Display Table of Contents >>

Navigation:  »No topics above this level«

Ajax - pesquisa em grades e ordenação

Previous pageReturn to chapter overviewNext page

Tela

 

Ao abrir mostra uma grade com vários bancos, códigos e URL.

O foco fica no campo "Pesquisa"

 

ajax1

 

Ao digitar um conteúdo a grade é filtrada (todas as colunas) de forma dinâmica. Sem nova requisição ao servidor.

Aqui mostra resultando ao digitar "Banco do Brasil":

 

ajax2

Bônus: ao clicar no cabeçalho da grade o conteúdo é ordenado (asc e desc) - nas duas primeiras colunas:

 

ajax3

 

 

Clicando no campo "Nome":

clip0001

 

Projeto

 

ajax4

 

Default.aspx

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication4.WebForm1" %>

 

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <link rel="stylesheet" href="css/estilo.css" type="text/css" />

    <link rel="stylesheet" href="css/tablesorter.css" type="text/css" />

    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>

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

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

    <script type="text/javascript" id="js">

        $(document).ready(function () {

            //Ordenacao da tabela

            $("table").tablesorter({

                sortList: [[1, 0]],

                widgets: ['zebra'],

                headers: {

                    2: {

                        // desabilita a ordenação da coluna com as bandeiras     

                        sorter: false

                    }

                }

            });

 

            //Pesquisa na tabela

            $("#id_search").quicksearch("table tbody tr", {

                noResults: '#noresults',

                stripeRows: ['odd', 'even'],

                loader: 'span.loading'

            });

        });

    </script>

</head>

<body>

    <form id="form1" runat="server">

        <div id="pesquisa-bancos" class="menu">

            Use o filtro para facilitar a pesquisa

                         <input type="text" name="search" value="" id="id_search" placeholder="Pesquisa" autofocus="autofocus" />

        </div>

        <%--<br />--%>

        <div id="divConteudo" align="center">

            <div style="text-aligncenter">

                Lista sempre atualizada tendo como fonte o Banco Central e a FEBRABAN!

            </div>

            <asp:GridView ID="Grid" runat="server" AutoGenerateColumns="False" CssClass="tablesorter" OnPreRender="Grid_PreRender">

                <HeaderStyle CssClass="tablesorter" />

                <Columns>

                    <asp:BoundField DataField="Codigo" HeaderText="Código" ItemStyle-Width="100px" />

                    <asp:BoundField DataField="Nome" HeaderText="Nome" />

                    <asp:TemplateField HeaderText="Site">

                        <ItemTemplate>

                            <asp:HyperLink ID="hlAnimal" runat="server" NavigateUrl='<%# Eval("url")%>'><%# Eval("url")%></asp:HyperLink>

                        </ItemTemplate>

                    </asp:TemplateField>

                </Columns>

            </asp:GridView>

        </div>

    </form>

</body>

</html>

 

Default.cs

 

using System;

using System.Web.UI.WebControls;

 

namespace WebApplication4

{

    public partial class WebForm1 : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            EnableViewState = false;

        }

 

        private void LoadToGrid()

        {

        }

 

        protected void Grid_PreRender(object sender, EventArgs e)

        {

            Grid.DataSource = Banco.Get();

            Grid.DataBind();

 

            if (Grid.Rows.Count > 0)

            {

                //This replaces <td> with <th> and adds the scope attribute

                Grid.UseAccessibleHeader = true;

                //This will add the <thead> and <tbody> elements

                Grid.HeaderRow.TableSection = TableRowSection.TableHeader;

            }

        }

    }

}

 

Observações

 

Veja no childs deste tópico os demais arquivos necessários

 

http://tablesorter.com/docs/

http://beckelman.net/2008/11/20/jquery-tablesorter-and-quicksearch-plugins-together-demo/

https://github.com/riklomas/quicksearch

http://www.codigobanco.com