The Pager control provides a visual interface for custom paging in your web application.
By default, the pager displays a summary indicating the current page number out of the total page count, and navigation buttons. The number of simultaneously displayed navigation buttons is controlled by the NumericButtonCount property.
To implement your custom paging logic, use the PageIndexChanging and PageIndexChanged events.
Note that navigating between pages initiates a postback, which causes reloading the entire web page if the Pager control is not wrapped in an AJAX-enabled container. For demonstration purposes, this demo displays the Pager control within the asp:UpdatePanel
<dx:BootstrapPager runat="server" NumericButtonCount="5" ItemCount="1000">
</dx:BootstrapPager>
With PageSize Item
The Page Size item provides a visual interface to specify the number of data items to be displayed within a single page. To enable the Page Size item, set the PageSizeItemSettings.Visible property to true.
<dx:BootstrapPager runat="server" ItemCount="1000" NumericButtonCount="4">
<PageSizeItemSettings Visible="True"></PageSizeItemSettings>
</dx:BootstrapPager>
The First and Last pager buttons allow an end-user to quickly navigate to the first or last page of the paginated content. The visibility of the First and Last buttons is controlled by the FirstPageButton.Visible and LastPageButton.Visible properties respectively.
<dx:BootstrapPager runat="server" ItemCount="1000" NumericButtonCount="4">
<FirstPageButton Visible="true"></FirstPageButton>
<LastPageButton Visible="true"></LastPageButton>
</dx:BootstrapPager>
Without Summary
It is possible to hide the summary from the pager. You can achieve this goal by setting the Summary.Visible property to false.
<dx:BootstrapPager runat="server" ItemCount="1000" NumericButtonCount="5">
<Summary Visible="false" />
</dx:BootstrapPager>
You can hide numeric navigation buttons from the pager leaving only the Prev and Next buttons. To achieve this, set the ShowNumericButtons property to false.
<dx:BootstrapPager runat="server" ItemCount="1000" ShowNumericButtons="false">
</dx:BootstrapPager>
The Pager control can automatically hide currently disabled navigation buttons (e.g., hide the Next and Last buttons when the last page is displayed). To activate this behavior, set the ShowDisabledButtons property to false.
<dx:BootstrapPager runat="server" ItemCount="1000" NumericButtonCount="5" ShowDisabledButtons="false">
</dx:BootstrapPager>
Ellipsis Mode
The ellipsis mode determines where in the pager the ellipsis symbol is placed to indicate page numbers that are omitted. The Pager control can display the ellipsis symbol inside or outside the range of pages, or never display the ellipsis symbol. To specify the ellipsis mode, assign the required PagerEllipsisMode enumeration value to the Pager control's EllipsisMode property.
<dx:BootstrapPager runat="server" ItemCount="1000" EllipsisMode="OutsideNumeric" NumericButtonCount="5" PageIndex="5">
</dx:BootstrapPager>