How to use paging with Repeater control in ASP.NET

Question

<asp:Repeater ID="RepCourse" runat="server">

  <ItemTemplate>

    <div style="width:400px"></div>

    <div class="course" style="float: left; margin-left: 100px; margin-top: 100px">

      <div class="image">
        <asp:Image ID="imgteacher" runat="server" Height="150" Width="248" ImageUrl='<%# "ShowImage.ashx?id="+ DataBinder.Eval(Container.DataItem, "CourseID") %>'/>
      </div>

      <div style="margin-left: 3px; width: 250px">
        <div class="name">
          <a href="#"><asp:Label runat="server" ID="lblname" Text='<%#Eval("CourseName") %>'></asp:Label></a>
        </div>
        <div style="height: 13px"></div>
        <div id="teacher">
          <a href="#"><%#Eval("UserName") %> </a>
        </div>
      </div>

      <div style="height: 4px"></div>

      <div class="date">
        <div id="datebegin">
          <asp:Label ID="lbldatebegin" runat="server" Text='<%#Eval("BeginDate") %>'></asp:Label>
        </div>
        <div id="dateend">
          <asp:Label ID="lbldateend" runat="server" Text='<%#Eval("ClosingDate") %>'></asp:Label>
        </div>
      </div>

    </div>

  </ItemTemplate>

</asp:Repeater>

In my project Repeater Control works fine. And now I need pagination for replacing those data. But I don't have any information about this. May be someone give me advice about this issue.

As shown below picture.

Answer 1

There's no built-in pagination in the Repeater control, but based on this article, you can achieve pagination in the Repeater control by creating another Repeater control for pages and use PagedDataSource as it's source.

First, add this to your markup:

<div style="overflow: hidden;">

<asp:Repeater ID="rptPaging" runat="server" OnItemCommand="rptPaging_ItemCommand">
 <ItemTemplate>
  <asp:LinkButton ID="btnPage"
   style="padding:8px;margin:2px;background:#ffa100;border:solid 1px #666;font:8pt tahoma;"
   CommandName="Page" CommandArgument="<%# Container.DataItem %>"
   runat="server" ForeColor="White" Font-Bold="True">
    <%# Container.DataItem %>
  </asp:LinkButton>
 </ItemTemplate>
</asp:Repeater>

</div>

Next, add the following property in your code behind:

//This property will contain the current page number 
public int PageNumber
{
    get
    {
        if (ViewState["PageNumber"] != null)
        {
            return Convert.ToInt32(ViewState["PageNumber"]);
        }
        else
        {
            return 0;
        }
    }
    set { ViewState["PageNumber"] = value; }
}

Finally add the following methods:

protected void Page_Load(object sender, EventArgs e)
{
    BindRepeater();
}

private void BindRepeater()
{
    //Do your database connection stuff and get your data
    SqlConnection cn = new SqlConnection(yourConnectionString);
    SqlCommand cmd = new SqlCommand();
    cmd.Connection = cn;
    SqlDataAdapter ad = new SqlDataAdapter(cmd);
    cmd.CommandText = "Select * from YourTable";

    //save the result in data table
    DataTable dt = new DataTable();
    ad.SelectCommand = cmd;
    ad.Fill(dt);

    //Create the PagedDataSource that will be used in paging
    PagedDataSource pgitems = new PagedDataSource();
    pgitems.DataSource = dt.DefaultView;
    pgitems.AllowPaging = true;

    //Control page size from here 
    pgitems.PageSize = 4;
    pgitems.CurrentPageIndex = PageNumber;
    if (pgitems.PageCount > 1)
    {
        rptPaging.Visible = true;
        ArrayList pages = new ArrayList();
        for (int i = 0; i <= pgitems.PageCount - 1; i++)
        {
            pages.Add((i + 1).ToString());
        }
        rptPaging.DataSource = pages;
        rptPaging.DataBind();
    }
    else
    {
        rptPaging.Visible = false;
    }

    //Finally, set the datasource of the repeater
    RepCourse.DataSource = pgitems;
    RepCourse.DataBind();
}

//This method will fire when clicking on the page no link from the pager repeater
protected void rptPaging_ItemCommand(object source, System.Web.UI.WebControls.RepeaterCommandEventArgs e)
{
    PageNumber = Convert.ToInt32(e.CommandArgument) - 1;
    BindRepeater();
}

Please give it a try and if you faced any issue just inform me.

Edit: Alternative Solution

Another excellent solution can be found Here, this solution includes the Navigation buttons of pages. You'll need to download files from that link to see a functional pagination and just replace the DataList control with your Repeater control.

Hope this helps.