Supongamos que tenemos el siguiente ListView que toma datos de una tabla de la base de datos:

< View plain text >
html5

  1. <asp:ListView ID="LVRegistros" runat="server" DataKeyNames="IdRegistro"
  2.        ItemPlaceholderID="AquiVanLosItems">
  3.     <LayoutTemplate>
  4.         <table width="100%" border="0" cellpadding="5" cellspacing="0">
  5.             <tr>
  6.                 <td class="tdDatosTitulo">
  7.                     Nombre
  8.                 </td>
  9.             </tr>
  10.             <asp:PlaceHolder ID="AquiVanLosItems" runat="server"></asp:PlaceHolder>
  11.         </table>
  12.     </LayoutTemplate>
  13.     <ItemTemplate>
  14.         <tr>
  15.             <td>
  16.                 <%#Eval("IdRegistro")%>
  17.             </td>                              
  18.         </tr>
  19.     </ItemTemplate>
  20.     <EmptyDataTemplate>
  21.         No existen registros.
  22.     </EmptyDataTemplate>
  23. </asp:ListView>

Como puedes ver el primer renglón de la tabla contendrá el texto “Nombre” y los siguientes renglones se llenarán a partir de la información que exista en la base de datos.

Ahora bien, si existieran 50,000 registros, todos ellos aparecerían en la página, lo cual está lejos de ser óptimo.

Lo ideal es mostrar los primeros “n” registros y que después exista un paginador (o pager en inglés) tipo Google, que nos permita ir desplazándonos a través de las diferentes páginas de registros.

Con ASP.NET esto es muy sencillo. Basta incluir un control llamado DataPager dentro del LayoutTemplate del ListView.

El código quedarí­a así­:

< View plain text >
html5

  1. <asp:ListView ID="LVRegistros" runat="server" DataKeyNames="IdRegistro"
  2.        ItemPlaceholderID="AquiVanLosItems">
  3.     <LayoutTemplate>
  4.         <table width="100%" border="0" cellpadding="5" cellspacing="0">
  5.             <tr>
  6.                 <td class="tdDatosTitulo">
  7.                     Nombre
  8.                 </td>
  9.             </tr>
  10.             <asp:PlaceHolder ID="AquiVanLosItems" runat="server"></asp:PlaceHolder>
  11.             <tr>
  12.                 <td colspan="7" class="TdPie">Páginas:
  13.                     <asp:DataPager ID="Pager1" runat="server" PageSize="30">
  14.                         <Fields>
  15.                             <asp:NumericPagerField ButtonCount="50" />
  16.                         </Fields>
  17.                     </asp:DataPager>
  18.                 </td>
  19.             </tr>
  20.         </table>
  21.     </LayoutTemplate>
  22.     <ItemTemplate>
  23.         <tr>
  24.             <td>
  25.                 <%#Eval("IdCarpeta")%>
  26.             </td>                              
  27.         </tr>
  28.     </ItemTemplate>
  29.     <EmptyDataTemplate>
  30.         No existen registros.
  31.     </EmptyDataTemplate>
  32. </asp:ListView>

El código anterior coloca una lista de números del 1 en adelante que se pueden cliquear para moverse a las diferentes páginas de registros. Si quieres, por ejemplo, que el paginador aparezca arriba y abajo de los registros, simplemente coloca otro DataPager donde lo necesites.

En este caso utilicé dentro de Fields un control llamado NumericPagerField, pero también puedes utilizar NextPreviousPagerField y TemplatePagerField.

Aquí­ encontrarás la referencia a toda la clase DataPager con la explicación completa de cada uno de sus componentes:

http://msdn.microsoft.com/en-us/library/system.web.ui.webcontrols.datapager.aspx

¡Suerte!

5 comentarios sobre “Cómo utilizar un control DataPager con ListView para crear páginas de registros”

  4. Hola, tengo un problema tu codigo es el mismo que tengo pero entres capas y creo que eso no es el problema, pero cuando hago click para paginar no me sale de nada, recien al hacer otro click recien pagina. Osea tengo que hacer doble click para que me pagine como puedo solucionar eso. Gracias.

    Responder

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *


ocho − = 5