Buscar este blog

viernes, 26 de febrero de 2010

Como funciona el DataPager

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.

No hay comentarios:

Publicar un comentario