|
<< Click to Display Table of Contents >> Ajax - pesquisa em grades e ordenação |
  
|
|
<< Click to Display Table of Contents >> Ajax - pesquisa em grades e ordenação |
|
Tela
Ao abrir mostra uma grade com vários bancos, códigos e URL.
O foco fica no campo "Pesquisa"
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":
Bônus: ao clicar no cabeçalho da grade o conteúdo é ordenado (asc e desc) - nas duas primeiras colunas:
Clicando no campo "Nome":
Projeto
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-align: center">
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://beckelman.net/2008/11/20/jquery-tablesorter-and-quicksearch-plugins-together-demo/
•https://github.com/riklomas/quicksearch