Paginação com GridView - C#

Olá pessoal, hoje gostaria de falar e mostrar uma paginação simples, mas com pitada de mudança, quero dizer que mudei algumas coisas a fim de deixar mais amigável ao usuário. Lembra os dados que aparecem na paginação? Pois é, são números ou >> ou próximo; isso para um tablet ou tela maior fica maior ruim.

por Mauricio Junior

Olá pessoal, hoje gostaria de falar e mostrar uma paginação simples, mas com pitada de mudança, quero dizer que mudei algumas coisas a fim de deixar mais amigável ao usuário. Lembra os dados que aparecem na paginação? Pois é, são números ou>> ou próximo; isso para um tablet ou tela maior fica maior ruim.

Pra resolver meu problema coloquei algumas imagens com setas bem interessantes. Como neste documento iria falar de imagem na paginação, ou no link da paginação, resolvi mostrar como fazer uma.

Acredito que já saiba fazer, porém, pode ser de uma forma diferente. Segue abaixo a maneira que faço e nunca tive problema. Existem várias outras maneiras de fazer que não estão erradas.

Tag: Visual Studio 2012, C#, GridView

O primeiro passo é ter um GridView com os campos específicos. Listagem 1.1

<asp:GridView ID="grdItens" runat="server" AutoGenerateColumns="False" 
         AllowPaging="True"
         EnableModelValidation="True">
    <Columns>
      <asp:BoundField DataField="Campo1" HeaderText="Campo1" />
      <asp:BoundField DataField="Campo2" HeaderText="Campo2" />
      <asp:BoundField DataField="Campo3" HeaderText="Campo3" />
    </Columns>
    <HeaderStyle Font-Size="Smaller" />
    <PagerStyle Font-Size="Smaller" />
    <RowStyle Font-Size="Smaller" />
</asp:GridView>

Listagem 1.1

Bom, na listagem 1.1 mostrei apenas um GridView simples e com preparado para paginação de dados. Agora preciso colocar a quantidade e preparar os links de próximo, anterior e último com imagem. (Listagem 1.2)

<asp:GridView ID="grdItens" runat="server" AutoGenerateColumns="False" 
   AllowPaging="True"
   onpageindexchanging="grdItens_PageIndexChanging" 
   EnableModelValidation="True">
    <Columns>
      <asp:BoundField DataField="Campo1" HeaderText="Campo1" />
      <asp:BoundField DataField="Campo2" HeaderText="Campo2" />
      <asp:BoundField DataField="Campo3" HeaderText="Campo3" />
    </Columns>
    <HeaderStyle Font-Size="Smaller" />
    <PagerStyle Font-Size="Smaller" />
    <RowStyle Font-Size="Smaller" />
    <PagerSettings Position="Bottom" Mode="NextPreviousFirstLast" 
    PreviousPageText="<img src='imagens/seta-esquerda.png' border='0' title='Página Anterior'/>" 
    NextPageText="<img src='imagens/seta-direita.png' border='0' title='Próxima Página'/>" 
    FirstPageText="<img src='imagens/seta-esquerda-ultima.png' border='0' title='Primeira Página'/>" 
    LastPageText="<img src='imagens/seta-direita-ultima.png' border='0' title='Última Página'/>" PageButtonCount="15" />
</asp:GridView>

Listagem 1.2

Note que na propriedade existem as imagens de seta-esquerda, seta-direita e tudo mais. No final da propriedade, coloquei o PageButtonCount=15 para contar de 15 em 15.

Lembre-se que até agora não fizemos a parte do código C#. Isso foi apenas HTML da página. Nas propriedades do grid, tenho o código “onpageindexchanging="grdItens_PageIndexChanging" que cria o método responsável para fazer a paginação.

No Load_Page, ou seja, no método que carrega a página, eu chamo um método responsável por preencher o grid com dados vindo do banco. Listagem 1.3.

protected void Page_Load(object sender, EventArgs e)
{
  if (!Page.IsPostBack)
  {
     preencherGrid();
  }
}
private void preecherGrid()
{
        ClasseBRL _brl = new ClasseBRL();
        DataTable dtTable = _brl.ConsultarDados();
        grdItens.DataSource = dtTable;
        grdItens.DataBind();

}

Listagem 1.3 Passando para o método de paginação do grid, basta chamar o preencherGrid para preencher o grid, depois de colocar um novo índex. Veja o exemplo. Listagem 1.4.

protected void grdItens_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    grdItens.PageIndex = e.NewPageIndex;
    preecherGrid();
}

Listagem 1.4 Note que fica bem simples quando você tem um método principal para buscar os dados do banco de dados. Veja a Imagem 1 do resultado final.



Imagem 1.

Espero que tenha gostado e qualquer dúvida pode entrar em contato.

Saiba como paginar um Gridview utilizando o Linq