El
control DataPager nos permite añadir paginación a controles que muestran conjuntos de datos, sin embargo para que el
control DataPager funcione con un control este debe implementar la interfaz
IPageableItemContainer y hasta el
.Net framework 3.5 el único control que implementa esta interfaz es el control
ListView, por lo tanto es el único control con el que funcionara el
DataPager sin modificaciones.
Para usar un
DataPager con un
ListView se puede usar ya sea dentro del mismo o control o colocándolo después e indicando cual es el control que se va a paginar.
Es muy sencillo a continuación se muestran los dos ejemplos:
Para usar el control dentro del
ListView en que lo vamos a usar (se pone el
DataPager en el
LayoutTemplate:
<asp:ListView ID="ListView1" runat="server" DataSourceID="companyDS"
onitemcreated="ListView1_ItemCreated" >
<LayoutTemplate>
<table runat="server" cellspacing="0" border="1" style="border-collapse:collapse;">
<tr>
<th runat="server"><asp:Literal ID="Literal1" runat="server"
Text="<%$ Resources:Labels, CompanyName %>" />
</th>
<th runat="server"><asp:Literal ID="Literal2" runat="server"
Text="<%$ Resources:Labels, State %>" />
</th>
<th runat="server"><asp:Literal ID="Literal3" runat="server"
Text="<%$ Resources:Labels, Industry %>" />
</th>
</tr>
<tr runat="server" id="itemPlaceholder" />
</table>
<asp:DataPager ID="DataPager1" runat="server" QueryStringField="pageNumber"
PageSize="20">
<Fields>
<asp:NextPreviousPagerField ButtonType="Link"
FirstPageText="<%$ Resources:Labels, First %>"
LastPageText="<%$ Resources:Labels, Last %>"
NextPageText="<%$ Resources:Labels, Next %>"
PreviousPageText="<%$ Resources:Labels, Previous %>"
ShowFirstPageButton="True" ShowNextPageButton="False"
ShowPreviousPageButton="False" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField ButtonType="Link"
FirstPageText="<%$ Resources:Labels, First %>"
LastPageText="<%$ Resources:Labels, Last %>"
NextPageText="<%$ Resources:Labels, Next %>"
PreviousPageText="<%$ Resources:Labels, Previous %>"
ShowLastPageButton="True" ShowNextPageButton="False"
ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>
</LayoutTemplate>
<ItemTemplate>
<tr runat="server">
<td>
<asp:HyperLink ID="nameOutput" runat="server"
Text='<%# Bind("Name") %>'
NavigateUrl='<%# "Company.aspx?CompanyName=" + Server.UrlEncode((String)Eval("Name")) %>' />
</td>
<td>
<asp:Label ID="Label2" runat="server"
Text='<%# Bind("State") %>' />
</td>
<td>
<asp:Label ID="Label3" runat="server"
Text='<%# Bind("Industry") %>' />
</td>
</tr>
</ItemTemplate>
</asp:ListView>
O con el DataPager fuera del control, solo indicamos el control a paginar con el atributo PagedControlID:
<asp:ListView ID="ListView1" runat="server" DataSourceID="companyDS" OnItemCreated="ListView1_ItemCreated">
<LayoutTemplate>
<table runat="server" cellspacing="0" border="1" style="border-collapse: collapse;">
<tr>
<th runat="server">
<asp:Literal ID="Literal1" runat="server" Text="<%$ Resources:Labels, CompanyName %>" />
</th>
<th runat="server">
<asp:Literal ID="Literal2" runat="server" Text="<%$ Resources:Labels, State %>" />
</th>
<th runat="server">
<asp:Literal ID="Literal3" runat="server" Text="<%$ Resources:Labels, Industry %>" />
</th>
</tr>
<tr runat="server" id="itemPlaceholder" />
</table>
</LayoutTemplate>
<ItemTemplate>
<tr runat="server">
<td>
<asp:HyperLink ID="nameOutput" runat="server" Text='<%# Bind("Name") %>' NavigateUrl='<%# "Company.aspx?CompanyName=" + Server.UrlEncode((String)Eval("Name")) %>' />
</td>
<td>
<asp:Label ID="Label2" runat="server" Text='<%# Bind("State") %>' />
</td>
<td>
<asp:Label ID="Label3" runat="server" Text='<%# Bind("Industry") %>' />
</td>
</tr>
</ItemTemplate>
</asp:ListView>
<asp:DataPager ID="DataPager1" runat="server" QueryStringField="pageNumber" PageSize="20"
PagedControlID="ListView1">
<Fields>
<asp:NextPreviousPagerField ButtonType="Link" FirstPageText="<%$ Resources:Labels, First %>"
LastPageText="<%$ Resources:Labels, Last %>" NextPageText="<%$ Resources:Labels, Next %>"
PreviousPageText="<%$ Resources:Labels, Previous %>" ShowFirstPageButton="True"
ShowNextPageButton="False" ShowPreviousPageButton="False" />
<asp:NumericPagerField />
<asp:NextPreviousPagerField ButtonType="Link" FirstPageText="<%$ Resources:Labels, First %>"
LastPageText="<%$ Resources:Labels, Last %>" NextPageText="<%$ Resources:Labels, Next %>"
PreviousPageText="<%$ Resources:Labels, Previous %>" ShowLastPageButton="True"
ShowNextPageButton="False" ShowPreviousPageButton="False" />
</Fields>
</asp:DataPager>
Nótese el uso de la propiedad
QueryStringField si no se usa los botones del paginador usan postbacks y con la propiedad establecida se usan links normales la diferencia es muy importante si se se esta
optimizando para buscadores (que por lo general) no siguen los postbacks pero en una aplicación privada no es necesaria esa optimización.
También en los ejemplos vemos que se puede cambiar la apariencia y funcionamiento del
DataPager con los controles
Field que se colocan en el
Template Fields, en el ejemplo se muestran
Fields para un
paginador numérico y controles de página anterior y siguiente a los lados, si quisiéramos solo el paginador numérico por ejemplo solo usaríamos el
Field NumericPagerField.
Hay que notar que el
DataPager al utilizarse dentro del
ListView prácticamente no se puede modificar gráficamente después de crearlo por lo que lo mejor es modificarlo a mano en el html de la pagina.
Para aprender más sobre el
control DataPager busca en la lista de
artículos sobre el control DataPager en este blog.
