locked
page numbers in datalist ellipses RRS feed

  • Question

  • User-125499312 posted

    i have a datalist with asp:Repeater footer that shows page numbers - it is working fine.

    i have alot 0f pages - how do i show 10 page numbers at a time with ellipses ?

    <asp:Repeater ID="rpGiftRegistryItems" runat="server">
    <HeaderTemplate><table cellpadding="0" cellspacing="0" border="0"><tr><td></HeaderTemplate>
    <ItemTemplate>
    <asp:LinkButton ID="btnPage" Runat="server" CssClass="DLFooterGiftRegistry DLFooterGiftRegistryHrf" style="margin-left:-2px;" CommandName="Page" CommandArgument="<%#Container.DataItem %>" Text="<%# Container.DataItem %>" />
    </ItemTemplate>
    <FooterTemplate></td></tr></table></FooterTemplate>
    </asp:Repeater>

    Dim pages As New ArrayList()
    For i As Integer = 0 To pgItems.PageCount - 1
    pages.Add((i + 1).ToString())
    Next i
    rpGiftRegistryItems.DataSource = pages
    rpGiftRegistryItems.DataBind()

    Wednesday, June 26, 2019 5:17 PM

All replies

  • User288213138 posted

    Hi yzidell,

    According to your description, here is a demo for reference.

    I have created private variable for it and set its value to 3, The Record Count of the records is fetched from the Output Parameter and is passed to the PopulatePager method along with the PageIndex.

    The total of the records present in the database table and the Current Page that was fetched and displayed in the Repeater. Then some calculations are done to find the first and the last page of the pager and the using a loop a List of Pages are populated and finally are bound to the Repeater control for populating the Pager.

    The code:

    Pagination Stored Procedure:
    SET ANSI_NULLS ON
    GO
    SET QUOTED_IDENTIFIER ON
    GO
    -- =============================================
    CREATE PROCEDURE GetCustomersPageWise
          @PageIndex INT = 1
          ,@PageSize INT = 10
          ,@RecordCount INT OUTPUT
    AS
    BEGIN
          SET NOCOUNT ON;
          SELECT ROW_NUMBER() OVER
          (
                ORDER BY [CustomerID] ASC
          )AS RowNumber
          ,[CustomerID]
          ,[CompanyName]
          ,[ContactName]
         INTO #Results
          FROM [Customers]
         
          SELECT @RecordCount = COUNT(*)
          FROM #Results
               
          SELECT * FROM #Results
          WHERE RowNumber BETWEEN(@PageIndex -1) * @PageSize + 1 AND(((@PageIndex -1) * @PageSize + 1) + @PageSize) - 1
         
          DROP TABLE #Results
    END
    GO
    
    Aspx: <form id="form1" runat="server"> <table class="Repeater" border="1"> <tr> <th scope="col" style="width: 80px"> Customer Id </th> <th scope="col" style="width: 150px"> Customer Name </th> <th scope="col" style="width: 150px"> Company Name </th> </tr> <asp:Repeater ID="rptCustomers" runat="server"> <ItemTemplate> <tr> <td> <asp:Label ID="lblCustomerId" runat="server" Text='<%# Eval("CustomerId") %>' /> </td> <td> <asp:Label ID="lblContactName" runat="server" Text='<%# Eval("ContactName") %>' /> </td> <td> <asp:Label ID="lblCompanyName" runat="server" Text='<%# Eval("CompanyName") %>' /> </td> </tr> </ItemTemplate> </asp:Repeater> </table> <br /> <asp:DataList ID="rptPager" RepeatDirection="Horizontal" runat="server"> <ItemTemplate> <asp:LinkButton ID="lnkPage" runat="server" Text='<%#Eval("Text") %>' CommandArgument='<%# Eval("Value") %>' CssClass='<%# Convert.ToBoolean(Eval("Enabled")) ? "page_enabled" : "page_disabled" %>' OnClick="Page_Changed" OnClientClick='<%# !Convert.ToBoolean(Eval("Enabled")) ? "return false;" : "" %>'></asp:LinkButton> </ItemTemplate> </asp:DataList> </form> <form id="form1" runat="server"> <table class="Repeater" border="1"> <tr> <th scope="col" style="width: 80px"> Customer Id </th> <th scope="col" style="width: 150px"> Customer Name </th> <th scope="col" style="width: 150px"> Company Name </th> </tr> <asp:Repeater ID="rptCustomers" runat="server"> <ItemTemplate> <tr> <td> <asp:Label ID="lblCustomerId" runat="server" Text='<%# Eval("CustomerId") %>' /> </td> <td> <asp:Label ID="lblContactName" runat="server" Text='<%# Eval("ContactName") %>' /> </td> <td> <asp:Label ID="lblCompanyName" runat="server" Text='<%# Eval("CompanyName") %>' /> </td> </tr> </ItemTemplate> </asp:Repeater> </table> <br /> <asp:DataList ID="rptPager" RepeatDirection="Horizontal" runat="server"> <ItemTemplate> <asp:LinkButton ID="lnkPage" runat="server" Text='<%#Eval("Text") %>' CommandArgument='<%# Eval("Value") %>' CssClass='<%# Convert.ToBoolean(Eval("Enabled")) ? "page_enabled" : "page_disabled" %>' OnClick="Page_Changed" OnClientClick='<%# !Convert.ToBoolean(Eval("Enabled")) ? "return false;" : "" %>'></asp:LinkButton> </ItemTemplate> </asp:DataList> </form>
    aspx.cs:
    Class SurroundingClass Private PageSize As Integer = 3 Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) If Not IsPostBack Then Me.GetCustomersPageWise(1) End If End Sub Private Sub GetCustomersPageWise(ByVal pageIndex As Integer) Dim constring As String = ConfigurationManager.ConnectionStrings("constr527").ConnectionString Using con As SqlConnection = New SqlConnection(constring) Using cmd As SqlCommand = New SqlCommand("GetCustomers", con) cmd.CommandType = CommandType.StoredProcedure cmd.Parameters.AddWithValue("@PageIndex", pageIndex) cmd.Parameters.AddWithValue("@PageSize", PageSize) cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4) cmd.Parameters("@RecordCount").Direction = ParameterDirection.Output con.Open() Dim idr As IDataReader = cmd.ExecuteReader() rptCustomers.DataSource = idr rptCustomers.DataBind() idr.Close() con.Close() Dim recordCount As Integer = Convert.ToInt32(cmd.Parameters("@RecordCount").Value) Me.PopulatePager(recordCount, pageIndex) End Using End Using End Sub Private Sub PopulatePager(ByVal recordCount As Integer, ByVal currentPage As Integer) Dim dblPageCount As Double = CDbl((CDec(recordCount) / Convert.ToDecimal(PageSize))) Dim pageCount As Integer = CInt(Math.Ceiling(dblPageCount)) Dim pages As List(Of ListItem) = New List(Of ListItem)() If pageCount > 0 Then For i As Integer = 1 To pageCount pages.Add(New ListItem(i.ToString(), i.ToString(), i <> currentPage)) Next End If rptPager.DataSource = pages rptPager.DataBind() End Sub Protected Sub Page_Changed(ByVal sender As Object, ByVal e As EventArgs) Dim pageIndex As Integer = Integer.Parse((TryCast(sender, LinkButton)).CommandArgument) Me.GetCustomersPageWise(pageIndex) End Sub End Class

    The result:

    Best regards,

    Sam

    Thursday, June 27, 2019 8:20 AM
  • User-125499312 posted

    hi sam

    thank you for your response.

    my issue is thta i have over 50 pages.

    I would the footer to look like wit ellipses

    1 2 3 4 5 6 7 8 9 10 ....

    ... 11 12 13 14 15 16 17 18 19 20 ...

    thnks

    Thursday, June 27, 2019 12:28 PM
  • User288213138 posted

    Hi yzidell,

    Here's a similar demo for your reference.
    I called the method described below to populate the pager DataListcontrol based on the record count that we fetch from the database. Here we pass the total of the records present in the database table and the Current Page that was fetched and displayed in the DataList.

    The code:

    Pagination Stored Procedure:
    SET ANSI_NULLS ON
    GO
    SET QUOTED_IDENTIFIER ON
    GO
    -- =============================================
    CREATE PROCEDURE [dbo].[GetCustomersPageWise]
          @PageIndex INT = 1
          ,@PageSize INT = 10
          ,@RecordCount INT OUTPUT
    AS
    BEGIN
          SET NOCOUNT ON;
          SELECT ROW_NUMBER() OVER
          (
                ORDER BY [CustomerID] ASC
          )AS RowNumber
          ,[CustomerID]
          ,[CompanyName]
          ,[ContactName]
         INTO #Results
          FROM [Customers]
        
          SELECT @RecordCount = COUNT(*)
          FROM #Results
              
          SELECT * FROM #Results
          WHERE RowNumber BETWEEN(@PageIndex -1) * @PageSize + 1 AND(((@PageIndex -1) * @PageSize + 1) + @PageSize) - 1
        
          DROP TABLE #Results
    END
    
    Aspx:
    <div>
                <table border="1">
                    <tr>
                        <th scope="col" style="width: 80px">Customer Id
                        </th>
                        <th scope="col" style="width: 150px">Customer Name
                        </th>
                        <th scope="col" style="width: 150px">Company Name
                        </th>
                    </tr>
                    <asp:Repeater ID="rptCustomers" runat="server">
                        <ItemTemplate>
                            <tr>
                                <td>
                                    <asp:Label ID="lblCustomerId" runat="server" Text='<%# Eval("CustomerId") %>' />
                                </td>
                                <td>
                                    <asp:Label ID="lblContactName" runat="server" Text='<%# Eval("ContactName") %>' />
                                </td>
                                <td>
                                    <asp:Label ID="lblCompanyName" runat="server" Text='<%# Eval("CompanyName") %>' />
                                </td>
                            </tr>
                        </ItemTemplate>
                    </asp:Repeater>
                </table>
    
                <asp:DataList ID="rptPager" RepeatDirection="Horizontal" runat="server">
                    <ItemTemplate>
    
                        <asp:LinkButton ID="lnkPage" runat="server" Text='<%#Eval("Text") %>' CommandArgument='<%# Eval("Value") %>'
                            CssClass='<%# Convert.ToBoolean(Eval("Enabled")) ? "page_enabled" : "page_disabled" %>'
                            OnClick="Page_Changed" OnClientClick='<%# !Convert.ToBoolean(Eval("Enabled")) ? "return false;" : "" %>'></asp:LinkButton>
    
                    </ItemTemplate>
                </asp:DataList>
                
            </div>
    Aspx.cs
    
            private int PageSize = 2;
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!IsPostBack)
                {
                    this.GetCustomersPageWise(1);
                }
            }
    
            private void GetCustomersPageWise(int pageIndex)
            {
                string constring = ConfigurationManager.ConnectionStrings["constr527"].ConnectionString;
                using (SqlConnection con = new SqlConnection(constring))
                {
                    using (SqlCommand cmd = new SqlCommand("GetCustomer", con))
                    {
                        cmd.CommandType = CommandType.StoredProcedure;
                        cmd.Parameters.AddWithValue("@PageIndex", pageIndex);
                        cmd.Parameters.AddWithValue("@PageSize", PageSize);
                        cmd.Parameters.Add("@RecordCount", SqlDbType.Int, 4);
                        cmd.Parameters["@RecordCount"].Direction = ParameterDirection.Output;
                        con.Open();
                        IDataReader idr = cmd.ExecuteReader();
                        rptCustomers.DataSource = idr;
                        rptCustomers.DataBind();
                        idr.Close();
                        con.Close();
                        int recordCount = Convert.ToInt32(cmd.Parameters["@RecordCount"].Value);
                        this.PopulatePager(recordCount, pageIndex);
                    }
                }
            }
    
            private void PopulatePager(int recordCount, int currentPage)
            {
                List<ListItem> pages = new List<ListItem>();
                int startIndex, endIndex;
                int pagerSpan = 5;
    
                //Calculate the Start and End Index of pages to be displayed.
                double dblPageCount = (double)((decimal)recordCount / Convert.ToDecimal(PageSize));
                int pageCount = (int)Math.Ceiling(dblPageCount);
                startIndex = currentPage > 1 && currentPage + pagerSpan - 1 < pagerSpan ? currentPage : 1;
                endIndex = pageCount > pagerSpan ? pagerSpan : pageCount;
                if (currentPage > pagerSpan % 2)
                {
                    if (currentPage == 2)
                    {
                        endIndex = 5;
                    }
                    else
                    {
                        endIndex = currentPage + 2;
                    }
                }
                else
                {
                    endIndex = (pagerSpan - currentPage) + 1;
                }
    
                if (endIndex - (pagerSpan - 1) > startIndex)
                {
                    startIndex = endIndex - (pagerSpan - 1);
                }
    
                if (endIndex > pageCount)
                {
                    endIndex = pageCount;
                    startIndex = ((endIndex - pagerSpan) + 1) > 0 ? (endIndex - pagerSpan) + 1 : 1;
                }
                if (currentPage > 1)
                {
                    pages.Add(new ListItem("First", "1"));
                }
                if (currentPage > 1)
                {
                    pages.Add(new ListItem("...", (currentPage - 1).ToString()));
                }
    
                for (int i = startIndex; i <= endIndex; i++)
                {
                    pages.Add(new ListItem(i.ToString(), i.ToString(), i != currentPage));
                }
                if (currentPage < pageCount)
                {
                    pages.Add(new ListItem("...", (currentPage + 1).ToString()));
                }
    
                if (currentPage != pageCount)
                {
                    pages.Add(new ListItem("Last", pageCount.ToString()));
                }
                rptPager.DataSource = pages;
                rptPager.DataBind();
            }
    
            protected void Page_Changed(object sender, EventArgs e)
            {
                int pageIndex = int.Parse((sender as LinkButton).CommandArgument);
                this.GetCustomersPageWise(pageIndex);
            }
    

    The result:

    Best regards,

    Sam

    Wednesday, July 3, 2019 11:34 AM
  • User-431147622 posted

    I am getting an error on compilation , i don't know where i can set these parameters.. i cannot find them.. 

    <asp:DataList ID="rptPager" RepeatDirection="Horizontal" runat="server">
    <ItemTemplate>

    <asp:LinkButton ID="lnkPage" runat="server" Text='<%#Eval("Text") %>' CommandArgument='<%# Eval("Value") %>'
    CssClass='<%# Convert.ToBoolean(Eval("Enabled")) ? "page_enabled" : "page_disabled" %>'
    OnClick="Page_Changed" OnClientClick='<%# !Convert.ToBoolean(Eval("Enabled")) ? "return false;" : "" %>'></asp:LinkButton>

    </ItemTemplate>
    </asp:DataList>

    Tuesday, March 24, 2020 6:31 AM
  • User-258456925 posted

    If you're comfortable using custom datapager, by far this is the best example with datapager repeater control in asp.net. It'll override existing datapager to enable paging functionality.

    https://www.aspneto.com/custom-datapagerrepeater-asp-net-repeater-control-with-datapager-example.html

    You can even modify in any way you want including styling.

    You can checkout from git repo: git clone https://github.com/immayankmodi/custom-repeater-control-with-datapager.git here.

    Wednesday, March 25, 2020 1:21 PM